:root{
      --bg:#f8f4ec;
      --bg-2:#efe5d7;
      --board:#e9d4b3;
      --board-2:#dcc2a0;
      --ink:#34271f;
      --muted:#7a6759;
      --line:rgba(92,69,39,.18);
      --accent-red:#ff7d70;
      --accent-yellow:#f7dd77;
      --accent-blue:#9edbff;
      --accent-pink:#f6a8d4;
      --accent-green:#d8efca;
      --accent-peach:#ffd8c8;
      --accent-lavender:#ddd8ff;
      --paper:#fffdfa;
      --paper-tint:#fff7ef;
      --shadow:0 20px 46px rgba(92,69,39,.12);
      --shadow-soft:0 10px 22px rgba(74,52,28,.08);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    html,body{margin:0;padding:0}
    body{
      font-family:"Noto Sans Thai","Inter",system-ui,sans-serif;
      color:var(--ink);
      background:#fffdf8;
    }

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

    @media (prefers-reduced-motion: reduce){
      *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
    }

    .page{
      width:min(1280px, calc(100% - 96px));
      max-width:1280px;
      margin:0 auto;
      padding:20px 18px 64px;
      background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.34), transparent 22%),
        radial-gradient(circle at 84% 20%, rgba(255,255,255,.20), transparent 18%),
        linear-gradient(180deg,var(--bg),var(--bg-2));
      min-height:100vh;
      box-shadow:
        -22px 0 42px rgba(74,52,28,.08),
        22px 0 42px rgba(74,52,28,.08);
    }

    .skip-link{position:absolute;left:14px;top:0;background:#fff;border:2px solid var(--line);border-radius:14px;padding:10px 14px;z-index:1002;font-weight:900;box-shadow:var(--shadow-soft);text-decoration:none;transform:translateY(calc(-100% - 14px));opacity:0;pointer-events:none}
    .skip-link:focus,.skip-link:focus-visible{top:14px;transform:translateY(0);opacity:1;pointer-events:auto}

    .hero{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(340px,420px);
      align-items:start;
      gap:18px 26px;
      padding:8px 4px 10px;
    }

    .hero-kicker{margin:2px 0 10px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:2px solid var(--line);border-radius:999px;background:linear-gradient(180deg,#fff9f3,#fff1df);box-shadow:0 5px 12px rgba(74,52,28,.06);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#8f705c}
    .hero-summary{margin:0 0 2px;max-width:48ch;font-size:14px;line-height:1.68;color:#6b594b;font-weight:700}

    .heading h1{
      margin:0 0 10px;
      font-size:clamp(28px, 2.45vw, 34px);
      line-height:1;
      letter-spacing:-.048em;
      text-transform:uppercase;
      display:inline-block;
      background:linear-gradient(180deg,var(--paper),#fff7ef);
      border:2px solid var(--line);
      padding:12px 18px 10px;
      border-radius:24px;
      box-shadow:var(--shadow-soft);
      max-width:100%;
      position:relative;
    }
    .heading h1::after{content:"";position:absolute;left:18px;right:18px;bottom:-8px;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--accent-pink),var(--accent-yellow) 55%,var(--accent-blue));opacity:.92}

    .hero-actions{
      display:flex;
      gap:9px;
      flex-wrap:wrap;
      margin-top:14px;
      align-items:center;
      white-space:normal;
      max-width:100%;
    }


    .hero > .hero-actions{
      grid-column:1 / -1;
      width:100%;
      max-width:100%;
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      margin-top:0;
      padding-top:2px;
      position:relative;
      z-index:3;
    }
    @media (min-width:1101px){
      .hero{grid-template-columns:minmax(0, 1fr) minmax(340px, 420px);grid-auto-rows:auto;}
      .heading{min-width:0;}
      .header-illustration{grid-column:2;grid-row:1;}
      .hero > .hero-actions{grid-row:2;}
      .hero > .hero-actions .btn.primary{min-width:0;}
      .hero > .hero-actions .hero-link-btn{font-size:12.5px;padding-left:11px;padding-right:11px;}
    }
    .hero-support-strip{grid-column:1 / -1;display:flex;gap:12px;flex-wrap:wrap;align-items:stretch;margin-top:2px}
    .support-pill{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--line);background:linear-gradient(180deg,rgba(255,253,248,.96),rgba(255,247,239,.96));border-radius:999px;padding:10px 15px;font-size:12px;font-weight:900;box-shadow:0 6px 12px rgba(74,52,28,.06);max-width:100%}
    .support-pill strong{font-size:13px;letter-spacing:-.01em}
    .support-pill-accent{background:linear-gradient(180deg,#fff2e8,#ffe6d7)}
    .support-pill-soft{background:linear-gradient(180deg,#fffdf8,#f8f1ff)}

    .btn{
      border:2px solid var(--line);
      border-radius:18px;
      padding:11px 16px;
      cursor:pointer;
      font-weight:800;
      box-shadow:var(--shadow-soft);
      background:linear-gradient(180deg,var(--paper),#fff6ee);
      transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
    }
    .btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(74,52,28,.10)}
    .btn:focus-visible,.dropdown-item:focus-visible,.pager-btn:focus-visible,.tiny-btn:focus-visible,.footer-link:focus-visible{outline:3px solid rgba(143,220,255,.75);outline-offset:2px}

    .btn.primary{
      background:linear-gradient(180deg,#ff8b7e,#ff7465);
      color:#fff;
      border-color:rgba(147,63,56,.35);
      box-shadow:0 12px 24px rgba(255,111,97,.22);
    }

    .btn.secondary-btn{
      background:var(--paper);
    }

    .top-icon-menu{position:relative}
    .hero-link-btn{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--line);background:linear-gradient(180deg,var(--paper),#fff6ee);border-radius:16px;padding:9px 12px;cursor:pointer;box-shadow:var(--shadow-soft);font-weight:800;font-size:13px;line-height:1.1;transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;text-decoration:none;white-space:nowrap;flex:0 1 auto}
    .hero-link-btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(74,52,28,.10)}

    .hero-actions .btn,
    .hero-actions .top-icon-menu,
    .hero-actions .hero-link-btn{min-height:48px}
    .hero-actions .btn.primary{flex:0 0 auto}
    .hero-actions .top-icon-menu{flex:0 0 auto}
    .hero-actions .top-icon-menu summary{height:48px}
    .top-icon-menu summary{
      list-style:none;
      display:flex;
      align-items:center;
      gap:10px;
      border:2px solid var(--line);
      background:linear-gradient(180deg,var(--paper),#fff6ee);
      border-radius:16px;
      padding:10px 14px;
      cursor:pointer;
      box-shadow:var(--shadow-soft);
      user-select:none;
      font-weight:800;
      white-space:nowrap;
    }
    .top-icon-menu summary::-webkit-details-marker{display:none}

    .top-icon-badge{
      width:30px;
      height:30px;
      border-radius:11px;
      display:grid;
      place-items:center;
      background:linear-gradient(180deg,#b9e7ff,#97d6ff);
      border:2px solid var(--line);
      font-size:15px;
      flex:0 0 auto;
      box-shadow:inset 0 -2px 0 rgba(255,255,255,.45);
    }

    .top-dropdown-list{
      position:absolute;
      top:calc(100% + 10px);
      left:0;
      min-width:250px;
      display:flex;
      flex-direction:column;
      gap:8px;
      padding:12px;
      border:2px solid var(--line);
      background:var(--paper);
      border-radius:20px;
      box-shadow:var(--shadow);
      z-index:30;
    }

    .dropdown-item,
    .pager-btn,
    .tiny-btn{
      text-align:left;
      border:2px solid var(--line);
      background:linear-gradient(180deg,var(--paper),#fff6ee);
      color:var(--ink);
      border-radius:999px;
      padding:8px 12px;
      font-size:12px;
      box-shadow:0 4px 10px rgba(74,52,28,.06);
      cursor:pointer;
      font-weight:800;
    }

    .header-illustration{
      width:100%;
      min-width:0;
      display:flex;
      justify-content:flex-end;
      align-items:flex-start;
      padding-top:4px;
    }

    .brand-logo{
      width:min(100%, 390px);
      margin-left:auto;
      display:flex;
      align-items:center;
      gap:16px;
      padding:14px 16px;
      border:2px solid var(--line);
      background:linear-gradient(180deg,var(--paper),#fff5eb);
      border-radius:30px;
      box-shadow:var(--shadow-soft);
      position:relative;
      overflow:hidden;
    }
    .brand-logo::after{content:"";position:absolute;right:-20px;top:-24px;width:110px;height:110px;border-radius:999px;background:radial-gradient(circle, rgba(255,231,122,.24) 0, rgba(255,231,122,0) 70%);pointer-events:none}

    .brand-copy{display:flex;flex-direction:column;gap:5px;min-width:0;justify-content:center}

    .brand-mark{position:relative;width:82px;height:82px;flex:0 0 auto}
    .brand-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(167,130,48,.35);background:linear-gradient(180deg,#f8e17f,#f3d463)}
    .brand-note{position:absolute;width:42px;height:42px;left:19px;top:18px;background:#fff;border:2px solid rgba(89,66,45,.18);border-radius:14px;transform:rotate(-8deg);box-shadow:0 8px 16px rgba(74,52,28,.10)}
    .brand-note::before{content:"";position:absolute;inset:8px 10px auto 10px;height:3px;background:#111;box-shadow:0 8px 0 #111, 0 16px 0 #111}
    .brand-heart{position:absolute;right:8px;top:7px;width:27px;height:27px;display:grid;place-items:center;border-radius:999px;background:linear-gradient(180deg,#f6a8d4,#ef8cc4);color:#2f261f;font-size:12px;border:2px solid rgba(89,66,45,.18);box-shadow:0 6px 12px rgba(239,140,196,.18)}
    .brand-kicker{font-size:11px;letter-spacing:.22em;color:#9a755d;font-weight:900;text-transform:lowercase}
    .brand-title{display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.08;font-weight:900;color:#2f261f;letter-spacing:-.015em;text-transform:uppercase}
    .brand-title span{display:block;white-space:nowrap}
    .brand-title.is-domain{font-size:16px;line-height:1.12;letter-spacing:0;text-transform:none}
    .brand-sub{display:inline-flex;align-items:center;gap:9px;flex-wrap:nowrap;align-self:flex-start;font-size:12px;color:#4f3d2e;margin-top:7px;font-weight:900;padding:7px 9px 7px 13px;background:linear-gradient(180deg,#fff4c9,#ffe9a8);border:2px solid rgba(147,110,55,.22);border-radius:999px;box-shadow:0 8px 18px rgba(152,104,42,.13), inset 0 1px 0 rgba(255,255,255,.72);position:relative;isolation:isolate;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
    .brand-sub::after{content:"";position:absolute;inset:3px auto auto 12px;width:42%;height:8px;border-radius:999px;background:rgba(255,255,255,.42);pointer-events:none;z-index:-1}
    .brand-sub:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(152,104,42,.18), inset 0 1px 0 rgba(255,255,255,.78);border-color:rgba(147,110,55,.32)}
    .brand-sub:focus-visible{outline:3px solid rgba(255,155,208,.58);outline-offset:4px}
    .coffee-text{letter-spacing:-.01em;white-space:nowrap}
    .coffee-arrow{font-weight:900;color:#9b674b;letter-spacing:0;font-size:14px;line-height:1}
    .coffee-trigger{width:35px;height:35px;border-radius:14px;border:2px solid rgba(112,78,49,.22);background:linear-gradient(180deg,#fffaf2,#f1dcc6);display:grid;place-items:center;cursor:pointer;box-shadow:0 7px 15px rgba(117,76,38,.16);transition:transform .18s ease, box-shadow .18s ease, background .18s ease;flex:0 0 auto}
    .coffee-trigger:hover{transform:translateY(-3px) rotate(-3deg) scale(1.04);box-shadow:0 12px 22px rgba(117,76,38,.20);background:linear-gradient(180deg,#fffdf7,#f4dfc9)}
    .coffee-trigger:focus-visible{outline:3px solid rgba(255,155,208,.58);outline-offset:3px}
    .coffee-cup{position:relative;width:17px;height:12px;border:2px solid #6c4f3a;border-radius:0 0 8px 8px;background:linear-gradient(180deg,#8c5f43 0 42%, #f9ead7 42% 100%)}
    .coffee-cup::before{content:"";position:absolute;right:-7px;top:1px;width:8px;height:8px;border:2px solid #6c4f3a;border-left:none;border-radius:0 9px 9px 0}
    .coffee-cup::after{content:"";position:absolute;left:3px;top:-10px;width:10px;height:10px;border-radius:999px;border-top:2px solid rgba(108,79,58,.55);transform:rotate(18deg);opacity:.85}
    .brand-sub-icon{display:inline-block;font-size:15px;line-height:1;margin-left:6px;vertical-align:-1px}

    .board-wrap{
      background:
        radial-gradient(circle at 15% 10%, rgba(255,255,255,.24), transparent 14%),
        linear-gradient(180deg,var(--board),var(--board-2));
      border:1px solid rgba(132,102,69,.12);
      border-radius:32px;
      box-shadow:var(--shadow);
      padding:18px 18px 24px;
      position:relative;
      overflow:hidden;
    }

    .board-wrap::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:radial-gradient(rgba(120,92,61,.08) 1px, transparent 1px);
      background-size:14px 14px;
      opacity:.28;
      pointer-events:none;
    }

    .toolbar{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:16px;
      flex-wrap:wrap;
      margin-bottom:18px;
      position:relative;
      z-index:1;
      min-height:8px;
    }

    .content{display:flex;flex-direction:column;gap:24px;position:relative;z-index:1}
    .section{padding-top:10px}

    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      margin:0 0 10px;
      padding:0 4px;
    }

    .section-head h2,
    .section-head h4{
      margin:0;
      font-size:22px;
      line-height:1.12;
      letter-spacing:-.02em;
      color:#3b2d22;
      font-weight:900;
      display:inline-block;
      background:linear-gradient(180deg,var(--paper),#fff6ee);
      padding:8px 14px 6px;
      border:2px solid var(--line);
      border-radius:16px;
      box-shadow:0 6px 12px rgba(74,52,28,.07);
      position:relative;
    }

    .section-head h2::after,
    .section-head h4::after{
      content:"";
      position:absolute;
      left:14px;
      right:14px;
      bottom:-7px;
      height:6px;
      background:linear-gradient(90deg,var(--accent-pink),var(--accent-yellow) 52%, var(--accent-blue));
      border-radius:999px;
    }

    .section-pager{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .pager-btn:disabled{opacity:.45;cursor:not-allowed}
    .pager-info{font-size:12px;color:var(--ink);min-width:44px;text-align:center;font-weight:800}
    .paged-grid > *[hidden]{display:none !important}

    .feature-grid{display:grid;grid-template-columns:1.1fr 1.1fr .8fr;gap:16px;align-items:stretch}
    .masonry{columns:3 280px;column-gap:16px;width:100%}
    .masonry > *{break-inside:avoid;margin:0 0 16px;display:inline-flex;width:100%}

    .note{
      position:relative;
      animation:cardFloatIn .45s ease both;
      width:100%;
      min-height:212px;
      padding:16px;
      border-radius:24px;
      border:2px solid rgba(92,69,39,.16);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      overflow:visible;
      transform:rotate(var(--tilt, 0deg));
      box-shadow:0 12px 24px rgba(74,52,28,.10);
      isolation:isolate;
    }

    .note:hover{transform:rotate(var(--tilt, 0deg)) translateY(-4px);box-shadow:0 18px 32px rgba(74,52,28,.14)}
    .note:focus-within{box-shadow:0 0 0 4px rgba(143,220,255,.22), 0 16px 28px rgba(74,52,28,.14)}
    .note::before{content:"";position:absolute;top:12px;left:12px;width:14px;height:14px;border-radius:50%;background:var(--accent-red);border:2px solid var(--line);z-index:3}
    .note::after{content:"";position:absolute;inset:0;border-radius:22px;background-image:radial-gradient(rgba(120,92,61,.08) 1px, transparent 1px);background-size:10px 10px;opacity:.18;pointer-events:none;z-index:0}
    .note > *{position:relative;z-index:1}

    .paper-fold{position:absolute;right:0;bottom:0;width:34px;height:34px;background:linear-gradient(135deg, transparent 0 48%, rgba(17,17,17,.10) 49% 60%, rgba(255,255,255,.7) 61% 100%);clip-path:polygon(100% 0, 0 100%, 100% 100%);border-bottom-right-radius:18px;z-index:2;pointer-events:none}
    .tape::before{content:"";position:absolute;top:-12px;left:50%;width:72px;height:24px;transform:translateX(-50%) rotate(-4deg);background:#fff8d8;border:2px solid rgba(57,42,29,.12);border-radius:6px;z-index:2}

    .yellow{background:#f6e7aa}
    .green{background:#e5efd9}
    .blue{background:#cdeeff}
    .orange{background:#ffbf78}
    .red{background:#ff8f86}
    .navy{background:#315f95}
    .black{background:#2f2a25}
    .white{background:#fffdf8}
    .peach{background:#f7ddd3}
    .cream{background:#fbefcf}
    .mint{background:#e4f0ea}
    .paper{background:#fffdf8}
    .ruled{background-image:repeating-linear-gradient(180deg, transparent 0, transparent 27px, rgba(120,92,61,.12) 28px)}
    .note.orange{border-color:rgba(156,94,22,.30)}
    .note.red{border-color:rgba(122,48,42,.26)}
    .note.navy,.note.black{color:#fff8ee;border-color:rgba(255,255,255,.18);box-shadow:0 14px 28px rgba(23,18,14,.20)}
    .note.navy::after,.note.black::after{background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);opacity:.16}
    .note.navy .title,.note.black .title,
    .note.navy .body,.note.black .body,
    .note.navy .name,.note.black .name,
    .note.navy .meta,.note.black .meta,
    .note.navy .reply-label,.note.black .reply-label,
    .note.navy .note-support-item,.note.black .note-support-item{color:#fff8ee}
    .note.navy .avatar,.note.black .avatar,
    .note.navy .badge,.note.black .badge,
    .note.navy .reply-btn,.note.black .reply-btn,
    .note.navy .read-btn,.note.black .read-btn,
    .note.navy .post-text-action,.note.black .post-text-action{background:rgba(255,253,248,.94);color:#2f261f;border-color:rgba(255,255,255,.25)}
    .note.navy .paper-fold,.note.black .paper-fold{background:linear-gradient(135deg, transparent 0 48%, rgba(255,255,255,.14) 49% 60%, rgba(255,255,255,.46) 61% 100%)}

    .soft-left{--tilt:-3deg}
    .soft-right{--tilt:3deg}
    .tiny-left{--tilt:-1deg}
    .tiny-right{--tilt:1deg}
    .medium-left{--tilt:-2deg}
    .medium-right{--tilt:2deg}

    .wide-note{min-height:236px}
    .tall-note{min-height:278px}
    .mini-note{min-height:170px}
    .compact .title{font-size:23px}
    .compact .body{font-size:14px}

    .note-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-left:10px}
    .identity{display:flex;gap:10px;align-items:flex-start}
    .avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(180deg,#fffdf9,#fff4ea);border:2px solid rgba(92,69,39,.16);display:grid;place-items:center;font-size:16px;flex:0 0 auto;box-shadow:0 6px 10px rgba(74,52,28,.05)}
    .name{margin:0;font-size:14px;font-weight:900;text-transform:uppercase}
    .meta{margin-top:2px;font-size:12px;line-height:1.45;color:#5b4e41;font-weight:700}

    .badge{border:2px solid rgba(92,69,39,.16);background:linear-gradient(180deg,var(--paper),#fff6ee);border-radius:999px;font-size:11px;color:#34281f;padding:6px 10px;white-space:nowrap;box-shadow:0 4px 10px rgba(74,52,28,.06);font-weight:900;text-transform:uppercase}
    .badge.warm{background:linear-gradient(180deg,#ffe9bf,#ffdca3)}
    .badge.pinned{background:linear-gradient(180deg,#ffd9ee,#ffc5e8)}
    .badge.quiet{background:linear-gradient(180deg,#e2efff,#d0e3ff)}
    .badge.gentle{background:linear-gradient(180deg,#e8f8ee,#d9f0e0)}

    .title{margin:14px 0 8px;font-size:27px;line-height:1.08;letter-spacing:-.038em;font-weight:900;text-transform:uppercase;text-wrap:balance}
    .body{font-size:14px;line-height:1.72;color:#3e3328;margin-bottom:12px;max-width:58ch;font-weight:700}

    .quote-note{
      min-height:212px;
      justify-content:center;
      background:linear-gradient(180deg,#fff7cf,#ffeec0);
      border-color:rgba(201,158,77,.28);
    }
    .quote-note::before{background:var(--accent-yellow)}
    .quote-note .title{font-size:22px;letter-spacing:-.025em;margin:0 0 12px;text-transform:none}
    .quote-note .body{font-size:17px;line-height:1.75;font-weight:800;margin:0;color:#3b2d22}
    .quote-note .quote-mark{font-size:28px;line-height:1;margin-bottom:8px;color:#b0824e;font-weight:900}
    .quote-note .badge{background:linear-gradient(180deg,#fff,#fff6e3)}
    .reply-label{margin:10px 0;font-size:12px;color:#534639;font-weight:800}
    .action-row{display:flex;flex-wrap:wrap;gap:8px}

    .reply-btn{display:inline-flex;align-items:center;gap:8px;border:2px solid rgba(92,69,39,.16);background:linear-gradient(180deg,#fff3cf,#ffe8ba);color:#3b2d22;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:900;box-shadow:0 5px 10px rgba(74,52,28,.06);cursor:pointer}
    .reply-icon{width:20px;height:20px;border-radius:999px;display:grid;place-items:center;background:var(--accent-pink);border:2px solid var(--line);color:#3b2d22;font-size:12px;line-height:1}

    .board-footer{margin-top:14px;padding:2px 6px 0;text-align:center;font-size:12px;color:#6b5d4d;letter-spacing:.01em}\n    .visit-count{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding:4px 10px;border:2px solid rgba(92,69,39,.14);border-radius:999px;background:rgba(255,253,248,.72);box-shadow:0 4px 10px rgba(74,52,28,.05);font-weight:900;color:#4f4033}\n    .visit-count strong{font-weight:900;color:#2f261f}\n    @media (max-width:760px){.visit-count{display:flex;width:max-content;max-width:100%;margin:8px auto 0;justify-content:center;flex-wrap:wrap}}

    .section-intro{margin:2px 4px 12px;padding:0 4px;font-size:14px;line-height:1.72;color:#5e4f41;font-weight:700;max-width:68ch}
    .resource-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
    .resource-card{border:2px solid rgba(92,69,39,.16);background:linear-gradient(180deg,rgba(255,253,248,.96),rgba(255,246,238,.94));border-radius:24px;padding:18px;box-shadow:var(--shadow-soft);transition:transform .18s ease, box-shadow .18s ease}
    .resource-card h5{margin:0 0 10px;font-size:20px;line-height:1.15;text-wrap:balance}
    .resource-card p,.resource-card li{font-size:13px;line-height:1.75;color:#5e4f41;font-weight:700}
    .resource-card ul{margin:0;padding-left:18px}
    .faq-list{display:flex;flex-direction:column;gap:10px}
    .faq-item{border:2px solid rgba(92,69,39,.16);background:linear-gradient(180deg,#fff,#fff8f1);border-radius:20px;padding:12px 14px;box-shadow:0 4px 10px rgba(74,52,28,.06)}
    .faq-item summary{cursor:pointer;list-style:none;font-size:14px;font-weight:900;display:flex;justify-content:space-between;gap:12px;align-items:center}
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item p{margin:10px 0 0}
    .help-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
    .help-link{display:inline-flex;align-items:center;gap:8px;border:2px solid rgba(92,69,39,.16);background:linear-gradient(180deg,#fff,#fff8f1);border-radius:999px;padding:9px 12px;font-size:12px;font-weight:900;text-decoration:none;box-shadow:0 5px 10px rgba(74,52,28,.06);transition:transform .18s ease, box-shadow .18s ease}
    .floating-top{position:fixed;right:18px;bottom:18px;width:48px;height:48px;border-radius:16px;border:2px solid var(--line);background:var(--paper);display:grid;place-items:center;box-shadow:var(--shadow-soft);cursor:pointer;z-index:50;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease}
    .floating-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}
    .floating-top:hover{box-shadow:0 12px 20px rgba(74,52,28,.12)}
    .resource-card:hover,.footer-card:hover,.help-link:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(74,52,28,.10)}
    .modal-card{transform:translateY(6px) scale(.985);transition:transform .22s ease}
    .modal-backdrop:not([hidden]) .modal-card{transform:translateY(0) scale(1)}
    @keyframes cardFloatIn{from{opacity:0;transform:translateY(12px) rotate(var(--tilt,0deg))}to{opacity:1;transform:translateY(0) rotate(var(--tilt,0deg))}}

    .modal-backdrop{
      position:fixed;
      inset:0;
      background:rgba(17,17,17,.45);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:20px;
      z-index:1000;
    }

    .modal-backdrop[hidden]{display:none !important}

    .modal-card{
      width:min(760px, 100%);
      max-height:min(88vh, 920px);
      overflow:auto;
      background:#fff;
      border:2px solid var(--line);
      border-radius:28px;
      box-shadow:0 24px 60px rgba(55,39,24,.18);
    }

    .modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 22px 14px;border-bottom:2px solid rgba(57,42,29,.12);background:linear-gradient(180deg,#ffe7a0,#ffd87e)}
    .modal-kicker{font-size:11px;letter-spacing:.16em;color:#111;font-weight:900;margin-bottom:6px;text-transform:uppercase}
    .modal-head h3{margin:0;font-size:28px;line-height:1.08;color:#111}
    .icon-close{width:42px;height:42px;border-radius:14px;border:2px solid var(--line);background:#fff;color:#111;font-size:24px;cursor:pointer}
    .modal-body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:18px}
    .opened-note{background:#fff8d8;border:2px solid var(--line);border-radius:22px;padding:16px;box-shadow:var(--shadow-soft)}
    .opened-note-title{font-size:24px;line-height:1.08;font-weight:900;margin-bottom:8px;color:#111;text-transform:uppercase}
    .opened-note-text{font-size:14px;line-height:1.8;color:#111;font-weight:700}
    .field-label{font-size:13px;font-weight:900;color:#111;margin-bottom:8px;text-transform:uppercase}
    .support-textarea{width:100%;min-height:120px;border:2px solid var(--line);background:#fff;border-radius:18px;padding:14px 16px;resize:none;overflow-y:auto;overflow-x:hidden;color:#111;line-height:1.75;outline:none;box-shadow:var(--shadow-soft);font-weight:700}
    .sticker-row{display:flex;gap:10px;flex-wrap:wrap}
    .sticker-btn{width:48px;height:48px;border-radius:16px;border:2px solid rgba(73,56,39,.16);background:#fffdf8;font-size:22px;cursor:pointer;box-shadow:0 4px 10px rgba(74,52,28,.06);transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease}
    .sticker-btn:hover{transform:translateY(-1px);box-shadow:0 8px 16px rgba(74,52,28,.08)}
    .sticker-btn.active{transform:translateY(-1px);border-color:rgba(121,90,58,.28);box-shadow:0 10px 18px rgba(74,52,28,.10), inset 0 0 0 2px rgba(255,255,255,.45)}
    .sticker-btn[data-tone="cream"]{background:#fff6dd}
    .sticker-btn[data-tone="blush"]{background:#ffe5ec}
    .sticker-btn[data-tone="peach"]{background:#ffe8d6}
    .sticker-btn[data-tone="sky"]{background:#e3f2ff}
    .sticker-btn[data-tone="butter"]{background:#fff1b8}
    .sticker-btn[data-tone="mint"]{background:#e6f4e8}
    .sticker-btn[data-tone="cream"].active{background:#f6e7aa}
    .sticker-btn[data-tone="blush"].active{background:#ffd3e4}
    .sticker-btn[data-tone="peach"].active{background:#ffd9c1}
    .sticker-btn[data-tone="sky"].active{background:#cfeaff}
    .sticker-btn[data-tone="butter"].active{background:#ffe27a}
    .sticker-btn[data-tone="mint"].active{background:#d7efcf}
    .modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
    .support-list{display:flex;flex-direction:column;gap:10px}
    .support-item{border:2px solid var(--line);background:#fff;border-radius:18px;padding:14px;box-shadow:var(--shadow-soft)}
    .support-item-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:8px}
    .support-sticker{font-size:22px;line-height:1}
    .support-content{font-size:14px;line-height:1.75;color:#111;white-space:pre-wrap;font-weight:500}
    .support-actions{display:flex;gap:8px;flex-wrap:wrap}
    .post-owner-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
    .tiny-btn.danger{background:#fff0ed}
    .note.has-replies{--tilt:0deg;transform:none !important}
    .note.has-replies:hover{transform:translateY(-3px) !important}
    .note-support-preview{margin-top:10px;padding:6px 0 0;border:none;background:transparent;border-radius:0;box-shadow:none;max-height:112px;overflow:auto}
    .note-support-preview[hidden]{display:none !important}
    .note-support-preview.is-scrollable{padding-right:8px}
    .note-support-preview::-webkit-scrollbar{width:8px}
    .note-support-preview::-webkit-scrollbar-thumb{background:rgba(92,69,39,.22);border-radius:999px}
    .note-support-list{display:flex;flex-direction:column;gap:8px}
    .note-support-item{font-size:13px;line-height:1.5;color:#3e3328;font-weight:500;padding:0;margin:0;word-break:break-word;display:flex;align-items:flex-start;gap:8px}
    .note-support-item .only-sticker{font-size:18px;line-height:1;flex:0 0 auto;margin-top:1px}
    .note-support-item .only-text{min-width:0;white-space:pre-wrap}
    .note-support-actions{display:inline-flex;gap:6px;margin-left:6px;flex:0 0 auto}
    .note-support-action{width:24px;height:24px;border-radius:999px;border:2px solid rgba(92,69,39,.16);background:rgba(255,253,248,.78);display:inline-grid;place-items:center;cursor:pointer;font-size:12px;font-weight:900;line-height:1;box-shadow:0 3px 8px rgba(74,52,28,.06)}
    .note-support-action:hover{background:#fff3cf;transform:translateY(-1px)}
    .note-support-action.danger:hover{background:#ffe1dd}

    
    .qr-modal-head{background:linear-gradient(180deg,#ffe6bb,#ffd5a1)}

    .btn, .dropdown-item, .pager-btn, .tiny-btn, .reply-btn, .coffee-trigger, .icon-close, .sticker-btn{
      transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
    }
    .btn:hover,.dropdown-item:hover,.pager-btn:hover,.tiny-btn:hover,.reply-btn:hover,.icon-close:hover{transform:translateY(-1px)}
    .btn:focus-visible,.dropdown-item:focus-visible,.pager-btn:focus-visible,.tiny-btn:focus-visible,.reply-btn:focus-visible,.icon-close:focus-visible,.sticker-btn:focus-visible, .composer-select:focus-visible, .composer-input:focus-visible, .support-textarea:focus-visible{
      outline:3px solid rgba(143,220,255,.7);
      outline-offset:2px;
    }
    .toolbar{min-height:auto;margin-bottom:8px}
    .toolbar-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
    .toolbar-chip{border:2px solid rgba(92,69,39,.16);background:linear-gradient(180deg,rgba(255,253,248,.84),rgba(255,244,235,.8));backdrop-filter:blur(4px);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;color:#5f4e3f;box-shadow:0 4px 10px rgba(74,52,28,.06)}
    .section-intro{margin:4px 6px 0;font-size:13px;line-height:1.65;color:#5f4e3f;font-weight:700;max-width:64ch}
    .note.is-selected{box-shadow:0 0 0 4px rgba(255,255,255,.45), 0 12px 26px rgba(74,52,28,.16)}
    .reply-btn.is-draft{background:#ffe4d9}
    .post-text-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
    .post-text-action{width:34px;height:34px;border-radius:999px;border:2px solid rgba(92,69,39,.16);background:var(--paper);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 10px rgba(74,52,28,.06);font-size:16px;font-weight:900;color:#3b2d22}
    .post-text-action:hover{transform:translateY(-1px)}
    .post-text-action.danger{color:#8f3e38}
    .draft-status{display:inline-flex;align-items:center;gap:8px;margin-right:auto;padding:7px 11px;border:2px solid rgba(92,69,39,.14);border-radius:999px;background:#fff6df;color:#6a4e38;font-size:12px;font-weight:900;box-shadow:0 4px 10px rgba(74,52,28,.05)}
    .draft-status[hidden]{display:none !important}
    .read-btn{display:inline-flex;align-items:center;gap:7px;border:2px solid rgba(92,69,39,.16);background:rgba(255,253,248,.9);color:#3b2d22;border-radius:999px;padding:8px 13px;font-size:13px;font-weight:900;box-shadow:0 5px 10px rgba(74,52,28,.06);cursor:pointer}
    .read-btn:hover{transform:translateY(-1px);background:#fff8e8}
    .read-modal-copy{font-size:17px;line-height:1.85;color:#2f261f;font-weight:650;white-space:pre-wrap}
    .read-modal-meta{display:inline-flex;width:max-content;max-width:100%;margin-bottom:10px;padding:7px 12px;border:2px solid rgba(92,69,39,.14);border-radius:999px;background:#fff6ee;font-size:12px;font-weight:900;color:#6b5d4d}
    @media (max-width:760px){.read-btn{min-height:44px;padding:9px 14px}.modal-card.read-card{height:auto;max-height:88vh}.read-modal-copy{font-size:16px;line-height:1.8}.draft-status{width:100%;justify-content:center;margin:0 0 8px}}
    .support-helper,.composer-helper{font-size:12px;line-height:1.6;color:#6a5949;font-weight:700}
    .char-counter{margin-left:auto;font-size:12px;color:#7a6757;font-weight:900}
    .helper-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
    .composer-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .composer-field-full{grid-column:1/-1}
    .composer-input,.composer-select{width:100%;border:2px solid var(--line);background:#fff;border-radius:16px;padding:12px 14px;box-shadow:var(--shadow-soft);outline:none;font-weight:700;color:#2f261f}
    .composer-textarea{min-height:168px;height:168px;resize:none;overflow-y:auto;overflow-x:hidden}
    .composer-tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
    .tip-card{border:2px solid rgba(92,69,39,.16);background:linear-gradient(180deg,#fff9ee,#fff1df);border-radius:20px;padding:12px;box-shadow:var(--shadow-soft)}
    .tip-card strong{display:block;margin-bottom:4px;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
    .tip-card span{font-size:12px;line-height:1.55;color:#5f4e3f;font-weight:700}
    .preview-chip{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:900;box-shadow:0 4px 10px rgba(74,52,28,.06)}
    .empty-state{border:2px dashed rgba(73,56,39,.18);background:rgba(255,253,248,.55);border-radius:22px;padding:18px;text-align:center;color:#6d5d4d;font-size:14px;line-height:1.7;font-weight:700}

    .latest-filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-2px 4px 12px}
    .latest-filter-chip{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--line);background:rgba(255,253,248,.86);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;color:#5f4e3f;box-shadow:0 4px 10px rgba(74,52,28,.06)}
    .latest-filter-clear{border:2px solid var(--line);background:#fff6ee;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:900;cursor:pointer;box-shadow:0 4px 10px rgba(74,52,28,.06)}
    .dropdown-item.is-active-filter{background:#ffe3b3;transform:translateY(-1px)}
    .latest-empty-state{margin:4px 0 0}
    .footer-panels{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px;margin-top:20px}
    .footer-card{border:2px solid rgba(92,69,39,.16);background:linear-gradient(180deg,var(--paper),#fff7ef);border-radius:24px;padding:16px 18px;box-shadow:var(--shadow-soft);transition:transform .18s ease, box-shadow .18s ease}
    .footer-card h5{margin:0 0 10px;font-size:18px;line-height:1.15;text-wrap:balance}
    .footer-card p,.footer-card li{font-size:13px;line-height:1.7;color:#5e4f41;font-weight:700}
    .footer-card ul{margin:0;padding-left:18px}
    .footer-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
    .footer-link{display:inline-flex;align-items:center;gap:8px;border:2px solid rgba(92,69,39,.16);background:linear-gradient(180deg,#fff,#fff8f1);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:900;text-decoration:none;color:#2f261f;box-shadow:0 4px 10px rgba(74,52,28,.06)}
    .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    .coffee-modal-layout{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:center}
    .qr-card{background:#fffdf8;border:2px solid var(--line);border-radius:24px;padding:14px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;align-items:center;gap:10px}
    .qr-image{width:180px;height:180px;border-radius:18px;border:2px solid rgba(57,42,29,.12);background:#fff;padding:10px;object-fit:contain}
    .qr-caption{font-size:12px;color:#6b5d4d;font-weight:800;text-align:center}
    .coffee-modal-copy{display:flex;flex-direction:column;gap:10px}
    .coffee-modal-copy h4{margin:0;font-size:24px;line-height:1.08;color:#2f261f}
    .coffee-modal-copy p{margin:0;font-size:14px;line-height:1.75;color:#4a3b2d;font-weight:700}

    .latest-filter-bar.is-active{padding:10px 12px;border:2px solid rgba(92,69,39,.14);border-radius:20px;background:rgba(255,253,248,.68);box-shadow:0 6px 14px rgba(74,52,28,.06)}
    .latest-filter-chip strong{color:#2f261f}
    .latest-filter-clear{min-height:38px}
    .empty-state strong{display:block;margin-bottom:4px;color:#3b2d22;font-size:15px}
    .empty-state .empty-action{margin-top:10px;display:inline-flex;align-items:center;gap:6px;border:2px solid rgba(92,69,39,.16);background:#fff6ee;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:900;cursor:pointer;box-shadow:0 4px 10px rgba(74,52,28,.06)}
    .local-settings{max-width:620px;margin:14px auto 0;text-align:center;color:#6b5d4d;font-size:12px}
    .local-settings summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:2px solid rgba(92,69,39,.14);border-radius:999px;background:rgba(255,253,248,.70);padding:7px 12px;font-weight:900;box-shadow:0 4px 10px rgba(74,52,28,.05);list-style:none}
    .local-settings summary::-webkit-details-marker{display:none}
    .local-settings-panel{margin:10px auto 0;padding:12px;border:2px solid rgba(92,69,39,.14);border-radius:18px;background:rgba(255,253,248,.72);box-shadow:0 6px 14px rgba(74,52,28,.06);display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
    .local-settings-panel .tiny-btn{font-size:12px;padding:8px 12px;background:#fff6ee}
    .toast-wrap{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);display:flex;flex-direction:column;gap:10px;z-index:2000;pointer-events:none;width:min(92vw,420px)}
    .soft-toast{align-self:center;border:2px solid rgba(92,69,39,.16);border-radius:999px;background:linear-gradient(180deg,#fffdf8,#fff1df);box-shadow:0 14px 34px rgba(74,52,28,.16);padding:11px 16px;font-size:13px;font-weight:900;color:#3b2d22;opacity:0;transform:translateY(10px) scale(.98);transition:opacity .2s ease, transform .2s ease}
    .soft-toast.show{opacity:1;transform:translateY(0) scale(1)}
    @media (max-width:640px){
      .modal-backdrop{align-items:flex-end;padding:0;background:rgba(17,17,17,.48)}
      .modal-card{width:100%;max-height:94vh;border-radius:28px 28px 0 0;border-left:0;border-right:0;border-bottom:0}
      .modal-head{position:sticky;top:0;z-index:2;padding:16px 18px 12px}
      .modal-head h3{font-size:24px}
      .modal-body{padding:16px 18px 22px;gap:16px}
      .support-textarea{min-height:132px;font-size:16px}
      .composer-input,.composer-select{font-size:16px;min-height:48px}
      .sticker-row{gap:8px}
      .sticker-btn{width:46px;height:46px}
      .modal-actions{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 28%);padding-top:14px}
      .modal-actions .btn{min-height:48px;flex:1;justify-content:center}
      .floating-top{right:14px;bottom:14px;width:52px;height:52px}
      .toast-wrap{bottom:18px;width:calc(100vw - 24px)}
      .soft-toast{border-radius:18px;text-align:center;width:100%}
      .latest-filter-bar.is-active{align-items:stretch}
      .latest-filter-chip,.latest-filter-clear{width:100%;justify-content:center;text-align:center}
    }


    @media (max-width:980px){
      .page{width:min(100%, calc(100% - 32px));}
    }

    @media (max-width:760px){
      body{background:linear-gradient(180deg,var(--bg),var(--bg-2));}
      .page{max-width:none;width:100%;box-shadow:none;padding-left:12px;padding-right:12px;}
    }
    .coffee-chip-row{display:flex;gap:8px;flex-wrap:wrap}
    .coffee-chip{border:2px solid var(--line);background:#fff7ea;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:900;color:#5e4734;box-shadow:0 4px 10px rgba(74,52,28,.06)}
    .coffee-link{display:inline-flex;align-items:center;gap:8px;width:max-content;border:2px solid var(--line);background:#fff;border-radius:999px;padding:10px 14px;font-size:13px;font-weight:900;color:#2f261f;text-decoration:none;box-shadow:0 6px 14px rgba(74,52,28,.08)}

    @media (max-width:1100px){
      .hero{grid-template-columns:1fr}
      .header-illustration{justify-content:flex-start}
      .brand-logo{margin-left:0}
      .hero-summary{max-width:100%}
    }

    @media (max-width:1180px){
      .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .masonry{columns:2 280px}
    }

    @media (max-width:980px){
      .resource-grid,.footer-panels{grid-template-columns:1fr 1fr}
    }

    @media (max-width:760px){
      .hero{grid-template-columns:1fr;gap:14px}
      .toolbar{flex-direction:column;align-items:stretch}
      .header-illustration,.toolbar-right{justify-content:flex-start}
      .header-illustration{width:100%;min-width:0;padding-top:0}
      .brand-logo{width:100%;max-width:500px;margin-left:0}
      .hero-support-strip{margin-top:0}
      .support-pill{width:100%;border-radius:18px}
      .brand-title{font-size:18px}
      .brand-title span{white-space:normal}
      .brand-kicker{letter-spacing:.12em}
      .brand-sub{font-size:12px;gap:6px}
      .coffee-modal-layout{grid-template-columns:1fr}
      .qr-card{max-width:220px;width:100%;justify-self:center}
      .feature-grid{grid-template-columns:1fr}
      .footer-panels,.composer-tips,.composer-grid,.resource-grid{grid-template-columns:1fr}
      .masonry{columns:1}
      .heading h1{font-size:30px}
      .section-head h2,.section-head h4{font-size:20px}
      .page{padding:12px 12px 32px}
      .board-wrap{padding:12px}
      .top-icon-menu{width:100%}
      .top-icon-menu summary{width:100%;justify-content:flex-start}
      .top-dropdown-list{position:static;margin-top:8px;min-width:0}
    }


    /* v39: keep the main title stacked under the style badge */
    .heading{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      justify-content:flex-start;
      width:100%;
      min-width:0;
    }
    .heading .hero-kicker{
      flex:0 0 auto;
      align-self:flex-start;
      margin:0 0 12px;
    }
    .heading h1{
      display:block;
      width:max-content;
      max-width:100%;
      margin:0 0 10px;
      white-space:nowrap;
    }
    @media (max-width:860px){
      .heading h1{white-space:normal;width:auto;}
    }


    /* v41: keep note cards aligned and fully visible when showing more cards */
    .masonry.paged-grid{
      columns:unset;
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:18px;
      align-items:start;
      width:100%;
    }
    .masonry.paged-grid > *{
      display:flex;
      width:100%;
      margin:0;
      break-inside:auto;
    }
    .masonry.paged-grid > *[hidden]{display:none !important}
    .note{height:auto;min-width:0}
    .note-support-preview{max-height:128px}
    .note-support-preview.is-scrollable{overflow-y:auto;overflow-x:hidden}

    @media (max-width:1180px){
      .masonry.paged-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
    }
    @media (max-width:760px){
      .masonry.paged-grid{grid-template-columns:1fr;gap:14px}
      .note-support-preview{max-height:116px}
    }


    /* v44: varied but readable typography for post-it content */
    .paged-grid .note:not(.quote-note):nth-child(6n+1) .title{
      font-family:"Arial Black","Noto Sans Thai",Impact,system-ui,sans-serif;
      letter-spacing:-.045em;
      font-weight:900;
    }
    .paged-grid .note:not(.quote-note):nth-child(6n+1) .body{
      font-family:"Trebuchet MS","Noto Sans Thai",system-ui,sans-serif;
      font-weight:700;
      letter-spacing:.005em;
    }

    .paged-grid .note:not(.quote-note):nth-child(6n+2) .title{
      font-family:"Trebuchet MS","Noto Sans Thai",system-ui,sans-serif;
      letter-spacing:-.032em;
      font-weight:900;
    }
    .paged-grid .note:not(.quote-note):nth-child(6n+2) .body{
      font-family:"Noto Sans Thai","Segoe UI",system-ui,sans-serif;
      font-weight:650;
      line-height:1.78;
    }

    .paged-grid .note:not(.quote-note):nth-child(6n+3) .title{
      font-family:Georgia,"Noto Sans Thai",serif;
      letter-spacing:-.035em;
      font-weight:900;
      text-transform:uppercase;
    }
    .paged-grid .note:not(.quote-note):nth-child(6n+3) .body{
      font-family:Georgia,"Noto Sans Thai",serif;
      font-weight:700;
      line-height:1.7;
    }

    .paged-grid .note:not(.quote-note):nth-child(6n+4) .title{
      font-family:"Courier New","Noto Sans Thai",monospace;
      letter-spacing:-.055em;
      font-weight:900;
    }
    .paged-grid .note:not(.quote-note):nth-child(6n+4) .body{
      font-family:"Courier New","Noto Sans Thai",monospace;
      font-weight:700;
      line-height:1.65;
    }

    .paged-grid .note:not(.quote-note):nth-child(6n+5) .title{
      font-family:"Gill Sans","Noto Sans Thai","Segoe UI",system-ui,sans-serif;
      letter-spacing:-.025em;
      font-weight:900;
    }
    .paged-grid .note:not(.quote-note):nth-child(6n+5) .body{
      font-family:"Gill Sans","Noto Sans Thai","Segoe UI",system-ui,sans-serif;
      font-weight:700;
      line-height:1.76;
    }

    .paged-grid .note:not(.quote-note):nth-child(6n) .title{
      font-family:"Arial Rounded MT Bold","Noto Sans Thai","Segoe UI",system-ui,sans-serif;
      letter-spacing:-.02em;
      font-weight:900;
    }
    .paged-grid .note:not(.quote-note):nth-child(6n) .body{
      font-family:"Noto Sans Thai","Segoe UI",system-ui,sans-serif;
      font-weight:600;
      line-height:1.82;
    }

    .note-support-item,
    .reply-label,
    .meta,
    .badge{
      font-family:"Noto Sans Thai","Inter",system-ui,sans-serif;
    }
  

    /* v45 raw-board handwritten direction: make header/footer part of the same board */
    body{
      background:
        radial-gradient(circle at 18% 10%, rgba(255,255,255,.32), transparent 26%),
        radial-gradient(circle at 82% 0%, rgba(255,226,122,.12), transparent 22%),
        linear-gradient(180deg,#e7cfaa 0%, #d9bc90 100%) !important;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        radial-gradient(rgba(83,61,36,.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(75,55,34,.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(75,55,34,.025) 1px, transparent 1px);
      background-size:13px 13px, 96px 96px, 96px 96px;
      opacity:.42;
      mix-blend-mode:multiply;
      z-index:-1;
    }
    .page{
      max-width:1500px !important;
      padding:26px 22px 52px !important;
      background:
        radial-gradient(circle at 10% 8%, rgba(255,255,255,.18), transparent 22%),
        linear-gradient(180deg, rgba(229,208,177,.42), rgba(217,192,158,.42)) !important;
      border-left:1px solid rgba(91,68,42,.10);
      border-right:1px solid rgba(91,68,42,.10);
      box-shadow:inset 0 0 90px rgba(91,68,42,.10);
    }
    .hero{
      display:grid !important;
      grid-template-columns:minmax(0,1fr) minmax(280px,420px) !important;
      align-items:start !important;
      gap:22px 34px !important;
      margin:0 0 16px !important;
      padding:0 !important;
      background:transparent !important;
    }
    .heading{
      display:block !important;
    }
    .heading .hero-kicker,
    .heading h1,
    .brand-kicker,
    .brand-title,
    .brand-sub,
    .board-footer,
    .local-data-settings summary{
      font-family:"Segoe Print","Comic Sans MS","Noto Sans Thai",cursive !important;
      letter-spacing:.01em !important;
    }
    .heading .hero-kicker{
      display:block !important;
      width:max-content !important;
      max-width:100% !important;
      margin:0 0 6px !important;
      padding:0 !important;
      border:0 !important;
      border-radius:0 !important;
      background:transparent !important;
      box-shadow:none !important;
      color:#6d4f38 !important;
      font-size:15px !important;
      font-weight:800 !important;
      text-transform:none !important;
      transform:rotate(-.6deg);
    }
    .heading h1{
      display:block !important;
      width:max-content !important;
      max-width:100% !important;
      margin:0 !important;
      padding:0 !important;
      border:0 !important;
      border-radius:0 !important;
      background:transparent !important;
      box-shadow:none !important;
      color:#2f261f !important;
      font-size:clamp(36px, 4.2vw, 68px) !important;
      line-height:1.05 !important;
      font-weight:900 !important;
      text-transform:none !important;
    }
    .heading h1::after{
      content:"";
      display:block;
      height:6px;
      margin:8px 0 0;
      border-radius:999px;
      background:linear-gradient(90deg,#ff9bd0,#ffe27a 48%,#8fdcff);
      opacity:.75;
      transform:rotate(-.35deg);
    }
    .header-illustration{padding:0 !important; align-self:start !important; justify-content:flex-end !important;}
    .brand-logo{
      width:auto !important;
      max-width:420px !important;
      padding:8px 2px !important;
      border:0 !important;
      border-radius:0 !important;
      background:transparent !important;
      box-shadow:none !important;
      gap:0 !important;
      display:block !important;
      text-align:left !important;
      transform:rotate(.35deg);
    }
    .brand-logo::after,.brand-logo::before,.brand-mark,.brand-ring,.brand-note,.brand-heart{display:none !important;}
    .brand-kicker{font-size:15px !important;color:#7a5a42 !important;font-weight:800 !important;text-transform:none !important;letter-spacing:.02em !important;}
    .brand-title{font-size:24px !important;line-height:1.25 !important;color:#2f261f !important;font-weight:900 !important;text-transform:none !important;letter-spacing:.01em !important;}
    .brand-sub{font-size:15px !important;color:#6b4c38 !important;font-weight:700 !important;margin-top:8px !important;}
    .coffee-support{display:inline-flex !important;align-items:center !important;gap:10px !important;margin-top:8px !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;color:#5a402e !important;font-family:"Segoe Print","Comic Sans MS","Noto Sans Thai",cursive !important;font-weight:800 !important;cursor:pointer !important;}
    .coffee-support::before,.coffee-support::after{display:none !important;}
    .coffee-cup-btn{width:auto !important;height:auto !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;font-size:0 !important;padding:0 !important;}
    .coffee-cup-btn::before{content:"☕";font-size:22px;line-height:1;}
    .hero-actions{
      grid-column:1 / -1 !important;
      display:flex !important;
      flex-wrap:wrap !important;
      align-items:center !important;
      gap:10px 18px !important;
      margin-top:4px !important;
      padding:8px 0 0 !important;
      border-top:2px dashed rgba(89,65,39,.16);
    }
    .btn,.hero-link-btn,.top-icon-menu summary,.dropdown-item,.pager-btn,.tiny-btn,.local-data-settings summary{
      font-family:"Segoe Print","Comic Sans MS","Noto Sans Thai",cursive !important;
      border:0 !important;
      background:transparent !important;
      box-shadow:none !important;
      border-radius:0 !important;
      padding:6px 8px !important;
      color:#3b2d22 !important;
      text-decoration:underline;
      text-decoration-thickness:2px;
      text-underline-offset:5px;
      text-decoration-color:rgba(255,111,97,.35);
    }
    .btn.primary{color:#b94f46 !important;background:transparent !important;text-decoration-color:rgba(255,111,97,.70) !important;}
    .top-icon-badge{display:none !important;}
    .top-dropdown-list{background:rgba(255,253,248,.92) !important;border:2px dashed rgba(89,65,39,.22) !important;border-radius:8px !important;box-shadow:8px 10px 0 rgba(91,68,42,.06) !important;}
    .board-wrap{
      margin-top:16px !important;
      padding:22px 20px 24px !important;
      border:0 !important;
      border-radius:0 !important;
      background:transparent !important;
      box-shadow:none !important;
      overflow:visible !important;
      border-top:3px solid rgba(100,74,43,.18) !important;
      border-bottom:3px solid rgba(100,74,43,.16) !important;
    }
    .board-wrap::before{opacity:.42 !important;background-size:12px 12px !important;}
    .section-head h2,.section-head h4{
      font-family:"Segoe Print","Comic Sans MS","Noto Sans Thai",cursive !important;
      background:transparent !important;
      border:0 !important;
      box-shadow:none !important;
      border-radius:0 !important;
      padding:0 !important;
      transform:rotate(-.4deg);
      font-size:clamp(24px,2.4vw,36px) !important;
    }
    .section-head h2::after,.section-head h4::after{bottom:-9px !important;height:5px !important;opacity:.65;}
    .board-footer{
      margin:18px 0 0 !important;
      padding:12px 4px 0 !important;
      color:#5b4635 !important;
      font-size:15px !important;
      line-height:1.8 !important;
      border-top:2px dashed rgba(89,65,39,.16);
      background:transparent !important;
      box-shadow:none !important;
    }
    .visit-count{display:block !important;width:max-content;max-width:100%;margin:0 auto 4px !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;color:#5b4635 !important;font-family:"Segoe Print","Comic Sans MS","Noto Sans Thai",cursive !important;}
    .local-data-settings summary{display:inline-flex !important;margin-top:8px !important;}
    @media (max-width:980px){
      .hero{grid-template-columns:1fr !important;gap:12px !important;}
      .header-illustration{justify-content:flex-start !important;}
      .brand-logo{max-width:100% !important;}
    }
    @media (max-width:760px){
      .page{padding:18px 12px 34px !important;}
      .heading h1{font-size:34px !important;}
      .hero-actions{gap:8px 12px !important;}
      .board-wrap{padding:16px 8px 20px !important;}
    }

  
    /* v46: keep the main board as one sheet, with clean white gutters on both sides */
    body{
      background:#fffdf8 !important;
    }
    body::before{
      display:none !important;
    }
    .page{
      position:relative !important;
      isolation:isolate;
      max-width:1500px !important;
      margin:0 auto !important;
      background:
        radial-gradient(circle at 10% 8%, rgba(255,255,255,.20), transparent 22%),
        radial-gradient(circle at 82% 0%, rgba(255,226,122,.10), transparent 20%),
        linear-gradient(180deg,#e7cfaa 0%, #d9bc90 100%) !important;
      box-shadow:
        0 0 0 1px rgba(91,68,42,.08),
        inset 0 0 90px rgba(91,68,42,.11) !important;
      border-left:1px solid rgba(91,68,42,.10) !important;
      border-right:1px solid rgba(91,68,42,.10) !important;
      overflow:hidden;
    }
    .page::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background-image:
        radial-gradient(rgba(83,61,36,.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(75,55,34,.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(75,55,34,.025) 1px, transparent 1px);
      background-size:13px 13px, 96px 96px, 96px 96px;
      opacity:.42;
      mix-blend-mode:multiply;
      z-index:-1;
    }
    @media (max-width:760px){
      .page{
        border-left:none !important;
        border-right:none !important;
      }
    }

  
    /* v49: chalkboard-style single board with white sides */
    :root{
      --chalkboard:#173f36;
      --chalkboard-2:#0f332d;
      --chalk:#f7f1df;
      --chalk-muted:rgba(247,241,223,.72);
      --wood-1:#d89a35;
      --wood-2:#9e6223;
      --wood-3:#f0bd55;
      --line:rgba(247,241,223,.22);
      --ink:#2d261f;
      --muted:#6e5b4c;
      --board:#173f36;
      --board-2:#0f332d;
    }

    body{background:#ffffff !important;color:var(--chalk);}

    .page{
      width:min(1320px, calc(100% - 96px)) !important;
      max-width:1320px !important;
      margin:28px auto 46px !important;
      padding:34px 34px 46px !important;
      min-height:auto !important;
      color:var(--chalk);
      background:
        radial-gradient(circle at 16% 10%, rgba(255,255,255,.08), transparent 19%),
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.05), transparent 20%),
        linear-gradient(115deg, rgba(255,255,255,.025) 0 1px, transparent 1px 16px),
        radial-gradient(rgba(255,255,255,.08) .9px, transparent 1px),
        linear-gradient(180deg,var(--chalkboard),var(--chalkboard-2)) !important;
      background-size:auto, auto, 34px 34px, 18px 18px, auto !important;
      border:18px solid #c8872e !important;
      border-radius:8px !important;
      box-shadow:
        inset 0 0 0 4px rgba(255,226,137,.45),
        inset 0 0 52px rgba(0,0,0,.35),
        0 18px 44px rgba(59,39,20,.25) !important;
      position:relative;
      overflow:visible;
    }

    .page::before{
      content:"";
      position:absolute;
      inset:-18px;
      border-radius:8px;
      pointer-events:none;
      background:
        linear-gradient(90deg,rgba(255,226,118,.48),transparent 18%,rgba(80,38,11,.18) 52%,transparent 80%,rgba(255,226,118,.35)),
        repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 2px,transparent 2px 18px);
      mix-blend-mode:multiply;
      opacity:.38;
    }

    .hero{
      border-bottom:2px dashed rgba(247,241,223,.20);
      padding:4px 0 24px !important;
      margin-bottom:22px;
    }

    .hero-kicker{
      margin:0 0 12px !important;
      padding:0 !important;
      border:0 !important;
      border-radius:0 !important;
      background:transparent !important;
      box-shadow:none !important;
      color:rgba(247,241,223,.72) !important;
      text-transform:none !important;
      letter-spacing:.04em !important;
      font-family:"Comic Sans MS","Segoe Print","Bradley Hand","Noto Sans Thai",cursive !important;
      font-size:15px !important;
      transform:rotate(-1deg);
    }

    .heading h1{
      background:transparent !important;
      border:0 !important;
      border-radius:0 !important;
      box-shadow:none !important;
      color:var(--chalk) !important;
      padding:0 !important;
      margin:0 0 16px !important;
      text-transform:none !important;
      letter-spacing:.02em !important;
      font-family:"Comic Sans MS","Segoe Print","Bradley Hand","Noto Sans Thai",cursive !important;
      font-weight:500 !important;
      font-size:clamp(42px, 5vw, 72px) !important;
      line-height:1.03 !important;
      text-shadow:0 1px 0 rgba(255,255,255,.10), 0 0 1px rgba(255,255,255,.55);
    }
    .heading h1::after{
      left:4px !important;
      right:18px !important;
      bottom:-10px !important;
      height:4px !important;
      opacity:.95 !important;
      filter:blur(.2px);
      background:linear-gradient(90deg,#ff8fc8,#f3d96e 54%,#83d7f7) !important;
    }

    .brand-logo{background:transparent !important;border:0 !important;box-shadow:none !important;color:var(--chalk) !important;padding:0 !important;justify-content:flex-end;}
    .brand-mark{display:none !important;}
    .brand-kicker,.brand-title,.brand-sub{background:transparent !important;border:0 !important;box-shadow:none !important;color:var(--chalk) !important;font-family:"Comic Sans MS","Segoe Print","Bradley Hand","Noto Sans Thai",cursive !important;}
    .brand-kicker{font-size:16px !important;letter-spacing:.04em !important;text-transform:none !important;color:rgba(247,241,223,.78) !important;}
    .brand-title{font-size:27px !important;line-height:1.18 !important;text-transform:lowercase !important;font-weight:600 !important;letter-spacing:.02em !important;}
    .brand-sub{display:inline-flex !important;width:auto !important;margin-top:14px !important;padding:9px 14px !important;border:2px solid rgba(246,223,119,.48) !important;border-radius:999px !important;color:#3a2a1d !important;background:#fff0b4 !important;font-family:"Noto Sans Thai","Inter",system-ui,sans-serif !important;font-weight:900 !important;box-shadow:0 5px 0 rgba(98,59,21,.24), 0 9px 18px rgba(0,0,0,.16) !important;}
    .brand-sub::after{display:none !important;}

    .hero > .hero-actions{border-top:0 !important;padding-top:20px !important;gap:20px !important;border-bottom:1px solid rgba(247,241,223,.13);padding-bottom:12px;}
    .btn,.dropdown-item,.pager-btn,.tiny-btn,.reply-btn{box-shadow:none !important;border:0 !important;background:transparent !important;color:var(--chalk) !important;padding:5px 3px !important;border-radius:0 !important;font-family:"Comic Sans MS","Segoe Print","Noto Sans Thai",cursive !important;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:rgba(255,143,200,.65);font-weight:800 !important;white-space:nowrap;}
    .btn.primary{color:#ff9a96 !important;background:transparent !important;border:0 !important;}
    .btn:hover,.dropdown-item:hover,.pager-btn:hover,.tiny-btn:hover,.reply-btn:hover{transform:translateY(-1px) rotate(-.5deg) !important;color:#fff7cf !important;}
    .top-icon-menu summary{background:transparent !important;border:0 !important;box-shadow:none !important;color:var(--chalk) !important;padding:5px 3px !important;border-radius:0 !important;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:rgba(255,143,200,.65);font-family:"Comic Sans MS","Segoe Print","Noto Sans Thai",cursive !important;}
    .top-dropdown-list{background:rgba(18,59,50,.96) !important;border:2px solid rgba(247,241,223,.24) !important;border-radius:10px !important;box-shadow:0 18px 40px rgba(0,0,0,.28) !important;}

    .board-wrap{background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important;overflow:visible !important;}
    .board-wrap::before{display:none !important;}
    .toolbar{color:var(--chalk) !important;}
    .content{gap:30px !important;}

    .section-head h2,.section-head h4{background:transparent !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;color:var(--chalk) !important;padding:0 0 8px !important;font-family:"Comic Sans MS","Segoe Print","Bradley Hand","Noto Sans Thai",cursive !important;font-weight:600 !important;letter-spacing:.01em !important;font-size:clamp(25px, 2.8vw, 38px) !important;text-shadow:0 0 1px rgba(255,255,255,.50);}
    .section-head h2::after,.section-head h4::after{left:0 !important;right:auto !important;width:min(260px,100%) !important;bottom:-2px !important;height:4px !important;opacity:.9 !important;}
    .pager-info{color:var(--chalk) !important;}

    .board-footer{border-top:2px dashed rgba(247,241,223,.20);margin-top:30px !important;padding-top:22px !important;color:rgba(247,241,223,.78) !important;font-family:"Comic Sans MS","Segoe Print","Noto Sans Thai",cursive !important;}
    .local-settings-toggle{color:var(--chalk) !important;border-color:rgba(247,241,223,.22) !important;}
    .note{box-shadow:0 10px 18px rgba(0,0,0,.18) !important;}

    @media (max-width:760px){
      .page{width:100% !important;margin:0 !important;border:8px solid #c8872e !important;border-radius:0 !important;padding:18px 14px 32px !important;}
      .heading h1{font-size:clamp(34px, 12vw, 48px) !important;}
      .brand-logo{justify-content:flex-start;}
      .hero > .hero-actions{gap:12px !important;}
      .btn,.top-icon-menu summary{white-space:normal;}
    }


    /* v50: fix chalkboard header overlap and improve text contrast/readability */
    @media (min-width: 981px){
      .hero{
        grid-template-columns:minmax(0, 1fr) minmax(320px, 380px) !important;
        column-gap:54px !important;
      }
      .heading{
        min-width:0 !important;
        max-width:820px !important;
        overflow:visible !important;
      }
      .heading h1{
        width:auto !important;
        max-width:820px !important;
        font-size:clamp(40px, 4.1vw, 58px) !important;
        line-height:1.08 !important;
        white-space:normal !important;
        overflow-wrap:normal !important;
        text-wrap:balance;
      }
      .header-illustration{
        grid-column:2 !important;
        justify-self:end !important;
        width:100% !important;
        max-width:380px !important;
        position:relative !important;
        z-index:2 !important;
      }
      .brand-logo{
        max-width:380px !important;
      }
      .brand-title{
        font-size:23px !important;
        line-height:1.08 !important;
      }
    }

    @media (min-width: 1300px){
      .heading h1{font-size:60px !important;max-width:900px !important;}
      .heading{max-width:900px !important;}
      .hero{grid-template-columns:minmax(0, 1fr) 390px !important;}
    }

    .brand-copy{max-width:100% !important;}
    .brand-title span{white-space:normal !important;}

    /* Keep paper note content readable on the dark chalkboard */
    .note,
    .note *{
      text-shadow:none !important;
    }
    .note{
      color:#2f261f !important;
      opacity:1 !important;
      filter:none !important;
    }
    .note .name,
    .note .title,
    .note .body,
    .note .meta,
    .note .reply-label,
    .note .note-support-item,
    .note .note-support-item .only-text{
      color:#2f261f !important;
      opacity:1 !important;
    }
    .note .title{
      font-weight:900 !important;
    }
    .note .body{
      color:#322a22 !important;
      font-weight:650 !important;
    }
    .note .meta,
    .note .reply-label{
      color:#594b3f !important;
      font-weight:800 !important;
    }
    .note .badge{
      color:#2f261f !important;
      border-color:rgba(73,56,39,.18) !important;
      background:rgba(255,253,248,.78) !important;
    }
    .note .reply-btn,
    .note .tiny-btn,
    .note .note-action,
    .note .note-support-action{
      color:#2f261f !important;
      background:rgba(255,253,248,.82) !important;
      border:2px solid rgba(73,56,39,.14) !important;
      border-radius:999px !important;
      text-decoration:none !important;
      box-shadow:0 4px 10px rgba(74,52,28,.08) !important;
      font-family:"Noto Sans Thai","Inter",system-ui,sans-serif !important;
    }
    .note .reply-btn:hover,
    .note .tiny-btn:hover,
    .note .note-action:hover,
    .note .note-support-action:hover{
      color:#2f261f !important;
      background:#fff3cf !important;
      transform:translateY(-1px) !important;
    }

    .hero > .hero-actions{
      position:relative !important;
      z-index:4 !important;
    }
    .hero-actions .btn,
    .hero-actions .hero-link-btn,
    .hero-actions .top-icon-menu summary{
      color:rgba(247,241,223,.90) !important;
      text-shadow:0 1px 0 rgba(0,0,0,.18) !important;
    }
    .hero-actions .btn.primary{
      color:#ffb0ab !important;
    }

    @media (max-width: 980px){
      .heading h1{
        font-size:clamp(36px, 8vw, 52px) !important;
        white-space:normal !important;
      }
      .header-illustration{max-width:100% !important;}
      .brand-logo{max-width:100% !important;}
      .brand-title{font-size:22px !important;}
    }


    /* v52: keep the back-to-top arrow inside the chalkboard frame */
    .floating-top{
      position:fixed !important;
      right:76px !important;
      bottom:44px !important;
      width:50px !important;
      height:50px !important;
      border-radius:14px !important;
      border:2px solid rgba(247,241,223,.30) !important;
      background:rgba(247,241,223,.92) !important;
      color:#173f36 !important;
      box-shadow:0 8px 18px rgba(0,0,0,.22) !important;
      z-index:80 !important;
    }
    .floating-top.is-visible{
      opacity:1 !important;
      pointer-events:auto !important;
      transform:translateY(0) !important;
    }
    .floating-top:hover{
      transform:translateY(-2px) !important;
      box-shadow:0 12px 24px rgba(0,0,0,.26) !important;
      background:#fff4c9 !important;
    }
    @media (min-width:1416px){
      .floating-top{right:calc((100vw - 1320px) / 2 + 28px) !important;}
    }
    @media (max-width:760px){
      .floating-top{right:18px !important;bottom:18px !important;}
    }

  

    /* v55: make chalk handwritten labels readable on green board */
    .hero-kicker{
      color:#fff4cf !important;
      opacity:1 !important;
      text-shadow:
        0 1px 0 rgba(0,0,0,.30),
        0 0 5px rgba(255,244,207,.18) !important;
      font-weight:700 !important;
      letter-spacing:.02em !important;
    }
    .visit-count,
    .board-footer .visit-count,
    .board-footer{
      color:#fff4cf !important;
      opacity:1 !important;
      text-shadow:0 1px 0 rgba(0,0,0,.32), 0 0 4px rgba(255,244,207,.14) !important;
    }
    .visit-count strong,
    .board-footer .visit-count strong{
      color:#ffffff !important;
      font-weight:900 !important;
      text-shadow:0 1px 0 rgba(0,0,0,.35) !important;
    }
    .board-footer{
      font-weight:700 !important;
    }
    .board-footer > div,
    .board-footer .visit-count{
      margin-bottom:8px !important;
    }


    /* v56: make the small board label match the red compose link for clearer visibility */
    .hero-kicker{
      color:#ff8b7e !important;
      opacity:1 !important;
      font-weight:900 !important;
      text-shadow:
        0 1px 0 rgba(0,0,0,.42),
        0 0 7px rgba(255,139,126,.24) !important;
    }


    /* v57: make the small board label exactly match the compose-link pink tone */
    .hero-kicker{
      color:#ffb0ab !important;
      opacity:1 !important;
      font-weight:900 !important;
      text-shadow:0 1px 0 rgba(0,0,0,.18) !important;
      text-decoration-color:rgba(255,176,171,.72) !important;
    }

    /* v58: make the small board label cream/chalk for maximum readability */
    .hero-kicker{
      color:#fff6d8 !important;
      opacity:1 !important;
      font-weight:900 !important;
      text-shadow:
        0 1px 0 rgba(0,0,0,.45),
        0 0 8px rgba(255,246,216,.24) !important;
      text-decoration-color:rgba(255,246,216,.70) !important;
    }

  

    /* v59: force hero kicker to be readable on chalkboard */
    html body .page .hero .heading .hero-kicker,
    html body .hero .heading p.hero-kicker,
    html body p.hero-kicker{
      color:#fff4d6 !important;
      -webkit-text-fill-color:#fff4d6 !important;
      opacity:1 !important;
      filter:none !important;
      mix-blend-mode:normal !important;
      text-shadow:
        0 2px 0 rgba(0,0,0,.34),
        0 0 8px rgba(255,244,214,.18) !important;
      font-weight:900 !important;
      letter-spacing:.03em !important;
    }


    /* v60: match the small board label color with the compose link */
    html body .page .hero .heading .hero-kicker,
    html body .hero .heading p.hero-kicker,
    html body p.hero-kicker{
      color:#ffb0ab !important;
      -webkit-text-fill-color:#ffb0ab !important;
      opacity:1 !important;
      filter:none !important;
      mix-blend-mode:normal !important;
      font-weight:900 !important;
      text-shadow:
        0 2px 0 rgba(0,0,0,.34),
        0 0 9px rgba(255,176,171,.28) !important;
      text-decoration-color:rgba(255,176,171,.78) !important;
    }

  
    /* v61: make every popup feel like the main chalkboard */
    .modal-backdrop{
      background:rgba(6, 18, 15, .62) !important;
      backdrop-filter:blur(3px);
    }

    .modal-card{
      background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,.035), transparent 22%),
        radial-gradient(circle at 82% 86%, rgba(255,255,255,.025), transparent 28%),
        linear-gradient(180deg,#123d35,#0e322c) !important;
      color:#fff8dc !important;
      border:14px solid #d0932f !important;
      border-radius:18px !important;
      box-shadow:0 22px 70px rgba(0,0,0,.38), inset 0 0 0 3px rgba(255,220,135,.24) !important;
      position:relative;
    }
    .modal-card::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:6px;
      background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
      background-size:18px 18px;
      opacity:.22;
      pointer-events:none;
      z-index:0;
    }
    .modal-card > *{position:relative;z-index:1}
    .modal-head,.qr-modal-head{
      background:transparent !important;
      border-bottom:1px dashed rgba(255,248,220,.28) !important;
      color:#fff8dc !important;
      padding:22px 24px 16px !important;
    }
    .modal-kicker{
      color:#f5b0ad !important;
      opacity:1 !important;
      text-shadow:0 2px 0 rgba(0,0,0,.22);
      letter-spacing:.18em;
    }
    .modal-head h3,.field-label,.char-count,.modal-body,.modal-body p,.modal-body label{
      color:#fff8dc !important;
    }
    .modal-head h3{
      font-family:"Comic Sans MS","Comic Neue","Noto Sans Thai",system-ui,sans-serif !important;
      font-weight:800 !important;
      text-shadow:0 2px 0 rgba(0,0,0,.22);
    }
    .icon-close{
      background:#fff8dc !important;
      color:#1f342d !important;
      border:2px solid rgba(255,248,220,.55) !important;
      box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
    }
    .opened-note,.support-textarea,.composer-input,.composer-select,.qr-card,.read-modal-copy,.support-item{
      background:#fff9df !important;
      color:#211c18 !important;
      border:2px solid rgba(214,147,47,.42) !important;
      box-shadow:0 10px 24px rgba(0,0,0,.16) !important;
    }
    .opened-note-title,.opened-note-text,.read-modal-meta,.read-modal-post-title{
      color:#211c18 !important;
    }
    .support-textarea::placeholder,.composer-input::placeholder{color:rgba(33,28,24,.52) !important;}
    .sticker-btn{
      background:#fff9df !important;
      border-color:rgba(214,147,47,.42) !important;
      box-shadow:0 7px 14px rgba(0,0,0,.12) !important;
    }
    .sticker-btn.active{
      background:#ffe48d !important;
      border-color:#d0932f !important;
      transform:translateY(-2px);
    }
    .modal-actions .secondary-btn,.modal-actions .btn.secondary-btn{
      background:#fff8dc !important;
      color:#1f342d !important;
      border-color:rgba(214,147,47,.52) !important;
    }
    .modal-actions .primary,.modal-actions .btn.primary{
      background:#ff7770 !important;
      color:#fff !important;
      border-color:rgba(255,248,220,.38) !important;
      box-shadow:0 10px 20px rgba(255,119,112,.18) !important;
    }
    .helper-line,.form-hint,.privacy-hint,.soft-tip{color:rgba(255,248,220,.82) !important;}
    @media (max-width:760px){.modal-card{border-width:10px !important;border-radius:22px 22px 0 0 !important;}}

  
    /* v62: all popups use the post-it style instead of the board style */
    .modal-backdrop{
      background:rgba(13,24,22,.56) !important;
      backdrop-filter:blur(3px) !important;
    }
    .modal-card{
      background:
        radial-gradient(rgba(112,84,47,.075) 1px, transparent 1px),
        linear-gradient(180deg,#fff7c9 0%,#fff3b5 100%) !important;
      background-size:12px 12px, auto !important;
      border:2px solid rgba(111,83,47,.24) !important;
      border-radius:28px !important;
      box-shadow:0 26px 70px rgba(20,18,14,.30), 0 8px 0 rgba(111,83,47,.08) !important;
      color:#2f261f !important;
      overflow:auto !important;
      transform:translateY(6px) rotate(-.35deg) scale(.985) !important;
    }
    .modal-backdrop:not([hidden]) .modal-card{
      transform:translateY(0) rotate(-.35deg) scale(1) !important;
    }
    .modal-card::before{
      content:"" !important;
      position:absolute !important;
      top:-14px !important;
      left:50% !important;
      width:104px !important;
      height:28px !important;
      transform:translateX(-50%) rotate(-3deg) !important;
      border:2px solid rgba(111,83,47,.14) !important;
      border-radius:8px !important;
      background:rgba(255,248,205,.86) !important;
      box-shadow:0 8px 18px rgba(74,52,28,.10) !important;
      z-index:5 !important;
      display:block !important;
      opacity:1 !important;
      pointer-events:none !important;
    }
    .modal-card::after{
      content:"" !important;
      position:absolute !important;
      right:0 !important;
      bottom:0 !important;
      width:46px !important;
      height:46px !important;
      clip-path:polygon(100% 0,0 100%,100% 100%) !important;
      border-bottom-right-radius:24px !important;
      background:linear-gradient(135deg,transparent 0 48%,rgba(80,55,34,.10) 49% 60%,rgba(255,255,255,.62) 61% 100%) !important;
      z-index:2 !important;
      display:block !important;
      opacity:1 !important;
      pointer-events:none !important;
    }
    .modal-card > *{position:relative !important;z-index:3 !important;}
    .modal-head,.qr-modal-head{
      background:transparent !important;
      border-bottom:2px dashed rgba(87,65,42,.22) !important;
      padding:22px 26px 16px !important;
      color:#2f261f !important;
    }
    .modal-kicker{
      color:#8c6245 !important;
      text-shadow:none !important;
      opacity:1 !important;
      font-family:"Noto Sans Thai","Inter",system-ui,sans-serif !important;
      letter-spacing:.14em !important;
      font-weight:950 !important;
    }
    .modal-head h3{
      color:#2f261f !important;
      text-shadow:none !important;
      font-family:"Noto Sans Thai","Inter",system-ui,sans-serif !important;
      font-weight:950 !important;
      letter-spacing:-.03em !important;
    }
    .modal-body,.modal-body label,.field-label,.char-count,.modal-body p{
      color:#3d3128 !important;
      text-shadow:none !important;
    }
    .opened-note,.support-textarea,.composer-input,.composer-select,.qr-card,.support-item{
      background:rgba(255,253,248,.88) !important;
      border:2px solid rgba(92,69,39,.16) !important;
      color:#2f261f !important;
      box-shadow:0 8px 18px rgba(74,52,28,.07) !important;
    }
    .opened-note-title,.opened-note-text,.read-modal-meta,.read-modal-post-title,.read-modal-copy{
      color:#2f261f !important;
      text-shadow:none !important;
    }
    .icon-close{
      background:#fffdf8 !important;
      color:#2f261f !important;
      border:2px solid rgba(92,69,39,.18) !important;
      box-shadow:0 8px 18px rgba(74,52,28,.08) !important;
    }
    .sticker-btn{
      background:#fffdf8 !important;
      border:2px solid rgba(92,69,39,.17) !important;
      box-shadow:0 6px 12px rgba(74,52,28,.08) !important;
    }
    .sticker-btn.active{
      background:#ffe78b !important;
      box-shadow:0 10px 20px rgba(74,52,28,.12) !important;
    }
    .modal-actions{background:transparent !important;}
    .modal-actions .secondary-btn,.modal-actions .btn.secondary-btn{
      background:#fffdf8 !important;
      color:#2f261f !important;
      border-color:rgba(92,69,39,.17) !important;
    }
    .modal-actions .primary,.modal-actions .btn.primary{
      background:#ff7168 !important;
      color:#fff !important;
      border-color:rgba(127,55,48,.35) !important;
      box-shadow:0 12px 24px rgba(255,111,97,.20) !important;
    }
    .coffee-modal-layout,.qr-card,.coffee-modal-copy,.coffee-modal-copy h4,.coffee-modal-copy p,.coffee-chip,.coffee-link{
      color:#2f261f !important;
      text-shadow:none !important;
    }
    @media (max-width:760px){
      .modal-card{
        border-width:2px !important;
        border-radius:28px 28px 0 0 !important;
        transform:translateY(10px) rotate(0deg) scale(.99) !important;
      }
      .modal-backdrop:not([hidden]) .modal-card{transform:translateY(0) rotate(0deg) scale(1) !important;}
      .modal-card::before{width:84px !important;height:22px !important;top:-10px !important;}
      .modal-actions{background:linear-gradient(180deg,rgba(255,247,201,0),#fff3b5 28%) !important;}
    }

  

    /* v63: rename board kicker and bring logo back into the top-right brand area */
    .hero-kicker{
      color:#ffb0ab !important;
      opacity:1 !important;
      filter:none !important;
      mix-blend-mode:normal !important;
      text-shadow:0 1px 0 rgba(0,0,0,.28), 0 0 1px rgba(255,255,255,.42) !important;
      font-weight:900 !important;
    }

    .brand-logo{
      display:flex !important;
      align-items:center !important;
      gap:18px !important;
    }
    .brand-mark{
      display:block !important;
      position:relative !important;
      width:76px !important;
      height:76px !important;
      flex:0 0 76px !important;
      filter:drop-shadow(0 8px 12px rgba(0,0,0,.18)) !important;
    }
    .brand-ring{
      display:block !important;
      position:absolute !important;
      inset:0 !important;
      border-radius:50% !important;
      background:linear-gradient(180deg,#f7df72,#e9c64f) !important;
      border:3px solid rgba(245,225,127,.56) !important;
      box-shadow:inset 0 0 0 2px rgba(95,58,20,.14) !important;
    }
    .brand-note{
      display:block !important;
      position:absolute !important;
      width:38px !important;
      height:38px !important;
      left:17px !important;
      top:17px !important;
      background:#fffdf3 !important;
      border:2px solid rgba(55,39,24,.18) !important;
      border-radius:10px !important;
      transform:rotate(-8deg) !important;
      box-shadow:0 5px 10px rgba(0,0,0,.10) !important;
    }
    .brand-note::before{
      content:"" !important;
      position:absolute !important;
      left:8px !important;
      right:8px !important;
      top:10px !important;
      height:3px !important;
      background:#111 !important;
      box-shadow:0 8px 0 #111, 0 16px 0 #111 !important;
    }
    .brand-heart{
      display:grid !important;
      place-items:center !important;
      position:absolute !important;
      right:2px !important;
      top:3px !important;
      width:29px !important;
      height:29px !important;
      border-radius:999px !important;
      background:#ef8cc4 !important;
      color:#241813 !important;
      border:2px solid rgba(55,39,24,.16) !important;
      font-size:13px !important;
      font-family:system-ui,sans-serif !important;
      font-weight:900 !important;
    }
    .brand-copy{
      max-width:360px !important;
    }
    @media (max-width: 980px){
      .brand-mark{width:60px !important;height:60px !important;flex-basis:60px !important;}
      .brand-note{width:31px !important;height:31px !important;left:13px !important;top:13px !important;}
      .brand-heart{width:24px !important;height:24px !important;font-size:11px !important;}
      .brand-logo{gap:12px !important;}
    }


    /* v64: force slogan to display as requested: two lowercase lines */
    .brand-title{
      display:flex !important;
      flex-direction:column !important;
      gap:4px !important;
      text-transform:none !important;
      font-weight:700 !important;
      letter-spacing:.02em !important;
      line-height:1.08 !important;
    }
    .brand-title span{
      display:block !important;
      white-space:nowrap !important;
      text-transform:none !important;
    }
    @media (max-width:760px){
      .brand-title span{white-space:normal !important;}
    }



    /* v68 stability patch: clearer mobile empty/onboarding notes without changing visual direction */
    .empty-state{
      position:relative;
      width:min(100%, 420px);
      min-height:120px;
      margin:10px 4px 0;
      padding:18px 18px 18px 24px !important;
      border:2px solid rgba(92,69,39,.16) !important;
      border-radius:24px !important;
      background:linear-gradient(180deg,#fff7cf,#ffeec0) !important;
      box-shadow:0 12px 24px rgba(74,52,28,.10) !important;
      text-align:left !important;
      transform:rotate(-1deg);
    }
    .empty-state::before{content:"";position:absolute;top:12px;left:12px;width:14px;height:14px;border-radius:50%;background:var(--accent-yellow);border:2px solid var(--line)}
    .empty-state strong{display:block;margin:0 0 8px 16px !important;color:#3b2d22;font-size:15px}
    .empty-state .empty-copy{display:block;margin-left:16px}
    .onboarding-note{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin:0 0 14px;
      padding:13px 14px 13px 20px;
      border:2px solid rgba(92,69,39,.16);
      border-radius:22px;
      background:linear-gradient(180deg,#fff7cf,#ffeec0);
      box-shadow:0 10px 20px rgba(74,52,28,.09);
      font-size:13px;
      line-height:1.65;
      font-weight:800;
      color:#4a3b2d;
    }
    .onboarding-note[hidden]{display:none !important}
    .onboarding-note::before{content:"";position:absolute;top:12px;left:9px;width:10px;height:10px;border-radius:50%;background:var(--accent-pink);border:2px solid var(--line)}
    .onboarding-note .tiny-btn{flex:0 0 auto;background:#fffdf8}
    @media (max-width:760px){.onboarding-note{align-items:flex-start;flex-direction:column}.onboarding-note .tiny-btn{width:100%;text-align:center}.empty-state{width:100%;margin-left:0;margin-right:0}}

  

    /* v68 mobile follow-up: add breathing room above/below composer field labels */
    #composeModal .composer-field-full{
      padding-top:8px;
    }
    #composeModal .composer-field-full .field-label{
      display:block;
      margin:0 0 12px;
      padding-left:4px;
      line-height:1.45;
    }
    #composeModal .composer-textarea{
      padding-top:18px;
    }

    @media (max-width:640px){
      #composeModal .composer-field-full{
        padding-top:12px;
      }
      #composeModal .composer-field-full .field-label{
        margin-bottom:14px;
        padding-left:6px;
        font-size:13px;
      }
      #composeModal .composer-textarea{
        padding-top:20px;
      }
    }

  

    /* final interaction safeguard: edit/delete controls must stay tappable above note texture layers */
    .post-text-actions,
    .post-text-action,
    .note-support-actions,
    .note-support-action{
      position:relative !important;
      z-index:25 !important;
      pointer-events:auto !important;
    }
    .post-text-action,
    .note-support-action{
      touch-action:manipulation !important;
      -webkit-tap-highlight-color:rgba(255,255,255,.28) !important;
    }

/* ===== Split from inline style ===== */

/* v68: force filter status to be a compact inline chip, never a full-width overlay */
    #latest-section .latest-filter-bar,
    #latest-section .latest-filter-bar.is-active{
      display:inline-flex !important;
      width:auto !important;
      max-width:100% !important;
      min-height:0 !important;
      align-items:center !important;
      justify-content:flex-start !important;
      gap:8px !important;
      flex-wrap:wrap !important;
      margin:4px 0 14px 0 !important;
      padding:0 !important;
      border:0 !important;
      border-radius:0 !important;
      background:transparent !important;
      box-shadow:none !important;
      backdrop-filter:none !important;
      position:relative !important;
      z-index:2 !important;
    }
    #latest-section .latest-filter-bar[hidden]{
      display:none !important;
    }
    #latest-section .latest-filter-chip{
      display:inline-flex !important;
      width:auto !important;
      max-width:min(620px, 100%) !important;
      min-height:38px !important;
      align-items:center !important;
      justify-content:center !important;
      white-space:normal !important;
      border:2px solid rgba(255,253,238,.55) !important;
      background:rgba(255,253,238,.92) !important;
      color:#263c35 !important;
      border-radius:999px !important;
      padding:8px 14px !important;
      font-size:14px !important;
      line-height:1.35 !important;
      font-weight:800 !important;
      text-shadow:none !important;
      box-shadow:0 8px 18px rgba(0,0,0,.12) !important;
    }
    #latest-section .latest-filter-chip strong{
      color:#132923 !important;
      font-weight:900 !important;
    }
    #latest-section .latest-filter-clear{
      display:inline-flex !important;
      width:auto !important;
      min-height:38px !important;
      align-items:center !important;
      justify-content:center !important;
      border:2px solid rgba(255,238,173,.7) !important;
      background:#fff0a8 !important;
      color:#17322b !important;
      border-radius:999px !important;
      padding:8px 14px !important;
      font-size:14px !important;
      font-weight:900 !important;
      opacity:1 !important;
      cursor:pointer !important;
      text-shadow:none !important;
      box-shadow:0 8px 18px rgba(0,0,0,.13) !important;
    }
    #latest-section .latest-filter-clear:hover,
    #latest-section .latest-filter-clear:focus-visible{
      transform:translateY(-1px) !important;
      outline:3px solid rgba(255,214,117,.45) !important;
      outline-offset:2px !important;
    }
    @media (max-width: 760px){
      #latest-section .latest-filter-bar,
      #latest-section .latest-filter-bar.is-active{
        display:flex !important;
        width:100% !important;
        margin:4px 0 12px 0 !important;
      }
      #latest-section .latest-filter-chip,
      #latest-section .latest-filter-clear{
        width:100% !important;
      }
    }

/* ===== Split from inline style ===== */

/* Mobile pass: header, menu buttons, compose popup, and reply-heavy notes */
    @media (max-width: 760px){
      html, body{
        width:100% !important;
        max-width:100% !important;
        overflow-x:hidden !important;
      }
      .page{
        width:100% !important;
        min-width:0 !important;
        padding:12px 10px 30px !important;
        overflow-x:hidden !important;
      }
      .hero{
        display:flex !important;
        flex-direction:column !important;
        gap:10px !important;
        padding:4px 2px 8px !important;
      }
      .heading{
        width:100% !important;
        min-width:0 !important;
      }
      .hero-kicker{
        max-width:100% !important;
        font-size:13px !important;
        line-height:1.35 !important;
        margin-bottom:8px !important;
        white-space:normal !important;
      }
      .heading h1{
        width:100% !important;
        max-width:100% !important;
        font-size:clamp(28px, 11vw, 38px) !important;
        line-height:1.05 !important;
        letter-spacing:-.035em !important;
        overflow-wrap:anywhere !important;
        word-break:normal !important;
      }
      .header-illustration{
        width:100% !important;
        max-width:100% !important;
        justify-content:flex-start !important;
      }
      .brand-logo{
        width:100% !important;
        max-width:100% !important;
        transform:none !important;
      }
      .brand-title{
        font-size:14px !important;
        line-height:1.28 !important;
      }
      .brand-title span{
        white-space:normal !important;
      }
      .brand-sub{
        max-width:100% !important;
        min-height:44px !important;
        align-items:center !important;
        white-space:normal !important;
        line-height:1.35 !important;
      }

      .hero > .hero-actions{
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:9px !important;
        width:100% !important;
        margin-top:4px !important;
        padding:10px 0 2px !important;
        border-top:1px dashed rgba(247,241,223,.22) !important;
      }
      .hero-actions .btn,
      .hero-actions .hero-link-btn,
      .hero-actions .top-icon-menu summary{
        width:100% !important;
        min-height:46px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        padding:9px 10px !important;
        text-align:center !important;
        line-height:1.3 !important;
        white-space:normal !important;
        overflow-wrap:anywhere !important;
        border:2px solid rgba(247,241,223,.26) !important;
        border-radius:16px !important;
        background:rgba(255,253,248,.10) !important;
        text-decoration:none !important;
      }
      .hero-actions .btn.primary{
        grid-column:1 / -1 !important;
        background:rgba(255,125,112,.18) !important;
        border-color:rgba(255,176,171,.45) !important;
      }
      .hero-actions .top-icon-menu{
        width:100% !important;
        min-width:0 !important;
      }
      .top-icon-menu[open]{
        grid-column:1 / -1 !important;
      }
      .top-dropdown-list{
        position:static !important;
        width:100% !important;
        min-width:0 !important;
        margin-top:8px !important;
        padding:10px !important;
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:8px !important;
        max-height:none !important;
      }
      .top-dropdown-list .dropdown-item{
        width:100% !important;
        min-height:44px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        padding:9px 12px !important;
        border-radius:14px !important;
        border:2px solid rgba(92,69,39,.14) !important;
        background:rgba(255,253,248,.92) !important;
        color:#17322b !important;
        text-shadow:none !important;
        text-decoration:none !important;
        white-space:normal !important;
      }

      .board-wrap{
        margin-top:10px !important;
        padding:14px 8px 18px !important;
      }
      .section-head{
        align-items:flex-start !important;
        flex-direction:column !important;
        gap:10px !important;
      }
      .section-pager{
        width:100% !important;
        justify-content:space-between !important;
      }
      .section-pager .pager-btn{
        min-height:42px !important;
        flex:1 1 0 !important;
        text-align:center !important;
      }
      .pager-info{
        flex:0 0 auto !important;
        min-width:58px !important;
      }

      .modal-backdrop{
        padding:0 !important;
        align-items:flex-end !important;
        overflow:hidden !important;
      }
      .modal-card{
        width:100vw !important;
        max-width:100vw !important;
        max-height:92dvh !important;
        height:auto !important;
        margin:0 !important;
        border-radius:22px 22px 0 0 !important;
        overflow:auto !important;
        overscroll-behavior:contain !important;
      }
      .modal-head{
        position:sticky !important;
        top:0 !important;
        z-index:8 !important;
        padding:14px 16px 12px !important;
        gap:10px !important;
      }
      .modal-head h3{
        font-size:22px !important;
        line-height:1.15 !important;
      }
      .icon-close{
        width:44px !important;
        height:44px !important;
        flex:0 0 auto !important;
      }
      .modal-body{
        padding:14px 16px calc(18px + env(safe-area-inset-bottom)) !important;
        gap:14px !important;
      }
      .composer-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;
      }
      .composer-field-full{
        grid-column:1 !important;
      }
      .composer-input,.composer-select,.support-textarea{
        width:100% !important;
        min-height:48px !important;
        font-size:16px !important;
        line-height:1.55 !important;
      }
      .composer-textarea,.support-textarea{
        min-height:150px !important;
        max-height:38dvh !important;
      }
      .composer-tips{
        grid-template-columns:1fr !important;
        gap:8px !important;
      }
      .sticker-row{
        display:grid !important;
        grid-template-columns:repeat(6, minmax(38px, 1fr)) !important;
        gap:7px !important;
      }
      .sticker-btn{
        width:100% !important;
        height:44px !important;
        min-width:0 !important;
        border-radius:14px !important;
      }
      .helper-row{
        gap:6px !important;
      }
      .char-counter{
        margin-left:0 !important;
      }
      .modal-actions{
        position:sticky !important;
        bottom:0 !important;
        z-index:7 !important;
        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
        padding-top:12px !important;
        padding-bottom:calc(8px + env(safe-area-inset-bottom)) !important;
      }
      .modal-actions .btn{
        width:100% !important;
        min-height:48px !important;
        padding:10px 12px !important;
        white-space:normal !important;
        text-align:center !important;
      }
      .modal-actions .draft-status{
        grid-column:1 / -1 !important;
      }

      .masonry.paged-grid,
      .feature-grid{
        grid-template-columns:1fr !important;
        gap:14px !important;
      }
      .note{
        width:100% !important;
        min-height:0 !important;
        padding:14px !important;
        transform:none !important;
      }
      .note:hover{
        transform:translateY(-2px) !important;
      }
      .note-top{
        padding-left:8px !important;
        gap:8px !important;
      }
      .identity{
        min-width:0 !important;
      }
      .name,.meta{
        overflow-wrap:anywhere !important;
      }
      .badge{
        max-width:42% !important;
        white-space:normal !important;
        text-align:center !important;
        line-height:1.25 !important;
      }
      .title{
        font-size:clamp(22px, 7vw, 28px) !important;
        line-height:1.08 !important;
      }
      .body{
        font-size:14px !important;
        line-height:1.68 !important;
      }
      .action-row,
      .post-owner-actions{
        gap:8px !important;
      }
      .reply-btn,
      .tiny-btn,
      .read-btn{
        min-height:42px !important;
        padding:8px 11px !important;
        white-space:normal !important;
      }
      .note-support-preview{
        max-height:104px !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        padding:8px 8px 8px 0 !important;
        -webkit-overflow-scrolling:touch !important;
      }
      .note-support-list{
        gap:7px !important;
      }
      .note-support-item{
        display:grid !important;
        grid-template-columns:auto minmax(0,1fr) auto !important;
        align-items:start !important;
        gap:7px !important;
        font-size:12.5px !important;
        line-height:1.48 !important;
      }
      .note-support-item .only-text{
        min-width:0 !important;
        overflow-wrap:anywhere !important;
        display:-webkit-box !important;
        -webkit-line-clamp:3 !important;
        -webkit-box-orient:vertical !important;
        overflow:hidden !important;
      }
      .note-support-actions{
        margin-left:0 !important;
        gap:5px !important;
      }
      .note-support-action{
        width:30px !important;
        height:30px !important;
      }
    }

    @media (max-width: 420px){
      .hero > .hero-actions{
        grid-template-columns:1fr !important;
      }
      .sticker-row{
        grid-template-columns:repeat(3, minmax(44px, 1fr)) !important;
      }
      .modal-actions{
        grid-template-columns:1fr !important;
      }
      .badge{
        max-width:100% !important;
      }
      .note-top{
        flex-direction:column !important;
        align-items:flex-start !important;
      }
    }

/* ===== Split from inline style ===== */

/* Dark post-it readability fix: force text on dark notes to pure white.
   Placed at the end so it wins over older note readability overrides. */
.note.black,
.note.navy{
  color:#fff !important;
}
.note.black .name,
.note.black .title,
.note.black .body,
.note.black .meta,
.note.black .reply-label,
.note.black .note-support-item,
.note.black .note-support-item .only-text,
.note.navy .name,
.note.navy .title,
.note.navy .body,
.note.navy .meta,
.note.navy .reply-label,
.note.navy .note-support-item,
.note.navy .note-support-item .only-text{
  color:#fff !important;
  opacity:1 !important;
}
.note.black .body,
.note.navy .body,
.note.black .meta,
.note.black .reply-label,
.note.navy .meta,
.note.navy .reply-label{
  color:#fff !important;
}
.note.black .badge,
.note.navy .badge,
.note.black .badge.warm,
.note.black .badge.pinned,
.note.black .badge.quiet,
.note.black .badge.gentle,
.note.navy .badge.warm,
.note.navy .badge.pinned,
.note.navy .badge.quiet,
.note.navy .badge.gentle{
  color:#fff !important;
  background:rgba(255,255,255,.14) !important;
  border-color:rgba(255,255,255,.32) !important;
}
/* Keep action buttons readable/tappable while card content stays white. */
.note.black .reply-btn,
.note.black .read-btn,
.note.black .post-text-action,
.note.black .tiny-btn,
.note.black .note-support-action,
.note.navy .reply-btn,
.note.navy .read-btn,
.note.navy .post-text-action,
.note.navy .tiny-btn,
.note.navy .note-support-action{
  color:#2f261f !important;
  background:rgba(255,253,248,.94) !important;
  border-color:rgba(255,255,255,.28) !important;
}

/* v69 UI polish: calmer typography, cleaner controls, and readable reply previews */
:root{
  --font-ui:"Noto Sans Thai","Inter","Segoe UI",system-ui,sans-serif;
  --font-display:"Comic Sans MS","Segoe Print","Bradley Hand","Noto Sans Thai",cursive;
  --font-ui-ar:"Noto Naskh Arabic","Noto Kufi Arabic","Tahoma","Arial","Segoe UI",system-ui,sans-serif;
  --font-display-ar:"Noto Kufi Arabic","Noto Naskh Arabic","Tahoma","Arial","Segoe UI",system-ui,sans-serif;
}

body, button, input, select, textarea{
  font-family:var(--font-ui) !important;
}

.heading h1,
.section-head h2,
.section-head h4,
.brand-title,
.brand-kicker,
.board-footer,
.footer-card h5{
  font-family:var(--font-display) !important;
}

/* Keep note content readable instead of using a different font on every card. */
.note .name,
.note .title,
.note .body,
.note .meta,
.note .badge,
.note .reply-label,
.note .note-support-item,
.note .note-support-item .only-text,
.note .read-btn,
.note .reply-btn,
.note .post-text-action,
.note .note-support-action{
  font-family:var(--font-ui) !important;
  letter-spacing:normal !important;
}

.note .title{
  font-size:clamp(22px, 1.65vw, 27px) !important;
  line-height:1.16 !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
}

.note .body{
  font-size:15px !important;
  line-height:1.68 !important;
  font-weight:650 !important;
}

.note .name{
  font-size:13px !important;
  line-height:1.22 !important;
  font-weight:900 !important;
}

.note .meta,
.note .reply-label{
  font-size:12px !important;
  line-height:1.45 !important;
}

/* Dark notes must use white note text only. Keep controls light for tappability. */
.note.black,
.note.navy{
  color:#fff !important;
}
.note.black .name,
.note.black .title,
.note.black .body,
.note.black .meta,
.note.black .reply-label,
.note.black .note-support-item,
.note.black .note-support-item .only-text,
.note.navy .name,
.note.navy .title,
.note.navy .body,
.note.navy .meta,
.note.navy .reply-label,
.note.navy .note-support-item,
.note.navy .note-support-item .only-text{
  color:#fff !important;
}
.note.black .badge,
.note.navy .badge{
  background:rgba(255,255,255,.92) !important;
  color:#2f261f !important;
}

/* Make edit/delete feel secondary, not like the main content. */
.post-text-actions{
  position:relative !important;
  z-index:8 !important;
}
.note .post-text-action,
.note .note-support-action{
  opacity:.56;
  transform:none !important;
}
.note:hover .post-text-action,
.note:focus-within .post-text-action,
.note:hover .note-support-action,
.note:focus-within .note-support-action{
  opacity:1;
}

/* Reply previews: show the newest few cleanly and avoid stretching cards. */
.note-support-preview{
  max-height:96px !important;
  overflow:hidden !important;
  mask-image:linear-gradient(180deg,#000 72%,rgba(0,0,0,.1));
}
.note-support-preview.is-scrollable{
  overflow-y:auto !important;
  padding-right:6px !important;
  mask-image:none;
}
.note-support-list{
  gap:6px !important;
}
.note-support-item{
  align-items:center !important;
  gap:7px !important;
}
.note-support-item .only-text{
  display:-webkit-box !important;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Soften the rare strong colors without removing them from the palette. */
.note.red{
  background:#ff9b92 !important;
}
.note.navy{
  background:#2f5689 !important;
}
.note.black{
  background:#2a2724 !important;
}

@media (max-width:760px){
  .note .title{font-size:23px !important;}
  .note .body{font-size:14.5px !important;line-height:1.66 !important;}
  .note-support-preview{max-height:86px !important;}
  .note .post-text-action,
  .note .note-support-action{opacity:1;min-width:34px;min-height:34px;}
}

/* v-ui-counts-tilt-refined: keep Latest and Unanswered notes calmer while preserving the playful board feel */
#latest-section .note.soft-left,
#sensitive-section .note.soft-left{--tilt:-1.15deg}
#latest-section .note.soft-right,
#sensitive-section .note.soft-right{--tilt:1.15deg}
#latest-section .note.medium-left,
#sensitive-section .note.medium-left{--tilt:-.85deg}
#latest-section .note.medium-right,
#sensitive-section .note.medium-right{--tilt:.85deg}
#latest-section .note.tiny-left,
#sensitive-section .note.tiny-left{--tilt:-.45deg}
#latest-section .note.tiny-right,
#sensitive-section .note.tiny-right{--tilt:.45deg}
#latest-section .quote-note,
#sensitive-section .quote-note{--tilt:-.35deg}

@media (max-width:760px){
  #latest-section .note,
  #sensitive-section .note{--tilt:0deg}
}


/* Popup theme updates: green compose modal + reply modal follows selected post-it color */
#composeModal .modal-card{
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.10), transparent 22%),
    linear-gradient(180deg,#0f5b52 0%, #0b4a43 100%) !important;
  border-color: rgba(223,188,103,.82) !important;
  box-shadow: 0 26px 70px rgba(9,42,38,.42) !important;
}
#composeModal .modal-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-image: radial-gradient(rgba(255,239,194,.10) 1px, transparent 1px);
  background-size: 13px 13px;
  pointer-events:none;
  opacity:.95;
}
#composeModal .modal-head{
  background: linear-gradient(180deg, rgba(8,57,51,.82), rgba(8,57,51,.58)) !important;
  border-bottom-color: rgba(230,215,173,.22) !important;
}
#composeModal .modal-kicker,
#composeModal .modal-head h3,
#composeModal .modal-body,
#composeModal .modal-body p,
#composeModal .field-label,
#composeModal .char-count,
#composeModal .composer-helper,
#composeModal .support-helper{
  color:#fff5dc !important;
}
#composeModal .icon-close{
  background: rgba(255,248,235,.94) !important;
  color:#2f261f !important;
  border-color: rgba(255,255,255,.22) !important;
}
#composeModal .composer-input,
#composeModal .composer-select,
#composeModal .support-textarea{
  background: rgba(255,252,246,.96) !important;
  border-color: rgba(230,215,173,.34) !important;
}
#composeModal .support-textarea::placeholder,
#composeModal .composer-input::placeholder{
  color: rgba(68,57,44,.56) !important;
}
#composeModal .sticker-btn{
  background: rgba(255,250,242,.94) !important;
  border-color: rgba(230,215,173,.28) !important;
}
#composeModal .modal-actions .secondary-btn{
  background: rgba(255,248,235,.95) !important;
}
#composeModal .modal-actions .btn.primary{
  background: linear-gradient(180deg,#ff9a8d,#ff7e70) !important;
}


#composeModal .modal-card[data-compose-theme],
#composeModal .modal-card[data-compose-theme] .modal-head{
  background-image:none !important;
}
#composeModal .modal-card[data-compose-theme="yellow"]{background:#f6e7aa !important;border-color:rgba(168,129,45,.46) !important;box-shadow:0 24px 56px rgba(83,63,28,.22) !important;}
#composeModal .modal-card[data-compose-theme="yellow"] .modal-head{background:rgba(240,214,130,.88) !important;border-bottom-color:rgba(124,91,33,.18) !important;}
#composeModal .modal-card[data-compose-theme="green"]{background:#e5efd9 !important;border-color:rgba(112,142,93,.42) !important;}
#composeModal .modal-card[data-compose-theme="green"] .modal-head{background:rgba(206,226,187,.9) !important;border-bottom-color:rgba(88,112,67,.18) !important;}
#composeModal .modal-card[data-compose-theme="blue"]{background:#cdeeff !important;border-color:rgba(94,146,170,.42) !important;}
#composeModal .modal-card[data-compose-theme="blue"] .modal-head{background:rgba(177,225,247,.9) !important;border-bottom-color:rgba(76,118,138,.18) !important;}
#composeModal .modal-card[data-compose-theme="peach"]{background:#f7ddd3 !important;border-color:rgba(175,120,103,.42) !important;}
#composeModal .modal-card[data-compose-theme="peach"] .modal-head{background:rgba(245,201,190,.9) !important;border-bottom-color:rgba(127,84,73,.18) !important;}
#composeModal .modal-card[data-compose-theme="cream"]{background:#fbefcf !important;border-color:rgba(170,144,82,.42) !important;}
#composeModal .modal-card[data-compose-theme="cream"] .modal-head{background:rgba(247,233,182,.9) !important;border-bottom-color:rgba(129,105,57,.18) !important;}
#composeModal .modal-card[data-compose-theme="mint"]{background:#e4f0ea !important;border-color:rgba(102,144,128,.42) !important;}
#composeModal .modal-card[data-compose-theme="mint"] .modal-head{background:rgba(207,230,221,.9) !important;border-bottom-color:rgba(76,107,95,.18) !important;}
#composeModal .modal-card[data-compose-theme="white"],
#composeModal .modal-card[data-compose-theme="paper"],
#composeModal .modal-card[data-compose-theme="ruled"]{background:#fffdf8 !important;border-color:rgba(160,134,92,.28) !important;}
#composeModal .modal-card[data-compose-theme="white"] .modal-head,
#composeModal .modal-card[data-compose-theme="paper"] .modal-head,
#composeModal .modal-card[data-compose-theme="ruled"] .modal-head{background:rgba(255,247,228,.92) !important;border-bottom-color:rgba(124,94,55,.16) !important;}
#composeModal .modal-card[data-compose-theme="orange"]{background:#ffbf78 !important;border-color:rgba(156,94,22,.34) !important;box-shadow:0 24px 56px rgba(120,78,22,.22) !important;}
#composeModal .modal-card[data-compose-theme="orange"] .modal-head{background:rgba(255,177,86,.92) !important;border-bottom-color:rgba(137,82,18,.18) !important;}
#composeModal .modal-card[data-compose-theme="red"]{background:#ff8f86 !important;border-color:rgba(146,64,58,.42) !important;}
#composeModal .modal-card[data-compose-theme="red"] .modal-head{background:rgba(252,121,109,.9) !important;border-bottom-color:rgba(132,56,48,.2) !important;}
#composeModal .modal-card[data-compose-theme="navy"]{background:#2e5570 !important;border-color:rgba(207,225,239,.24) !important;box-shadow:0 24px 56px rgba(18,32,46,.34) !important;}
#composeModal .modal-card[data-compose-theme="navy"] .modal-head{background:rgba(29,76,105,.92) !important;border-bottom-color:rgba(227,237,247,.16) !important;}
#composeModal .modal-card[data-compose-theme="black"]{background:#2f2a25 !important;border-color:rgba(255,255,255,.16) !important;box-shadow:0 24px 56px rgba(13,10,8,.42) !important;}
#composeModal .modal-card[data-compose-theme="black"] .modal-head{background:rgba(39,34,30,.94) !important;border-bottom-color:rgba(255,255,255,.12) !important;}
#composeModal .modal-card[data-compose-theme="yellow"]::after,
#composeModal .modal-card[data-compose-theme="green"]::after,
#composeModal .modal-card[data-compose-theme="blue"]::after,
#composeModal .modal-card[data-compose-theme="peach"]::after,
#composeModal .modal-card[data-compose-theme="cream"]::after,
#composeModal .modal-card[data-compose-theme="mint"]::after,
#composeModal .modal-card[data-compose-theme="white"]::after,
#composeModal .modal-card[data-compose-theme="paper"]::after,
#composeModal .modal-card[data-compose-theme="ruled"]::after,
#composeModal .modal-card[data-compose-theme="orange"]::after,
#composeModal .modal-card[data-compose-theme="red"]::after{opacity:.22 !important;}
#composeModal .modal-card[data-compose-theme="yellow"] .modal-kicker,
#composeModal .modal-card[data-compose-theme="yellow"] .modal-head h3,
#composeModal .modal-card[data-compose-theme="yellow"] .modal-body,
#composeModal .modal-card[data-compose-theme="yellow"] .modal-body p,
#composeModal .modal-card[data-compose-theme="yellow"] .field-label,
#composeModal .modal-card[data-compose-theme="yellow"] .char-count,
#composeModal .modal-card[data-compose-theme="yellow"] .composer-helper,
#composeModal .modal-card[data-compose-theme="yellow"] .support-helper,
#composeModal .modal-card[data-compose-theme="green"] .modal-kicker,
#composeModal .modal-card[data-compose-theme="green"] .modal-head h3,
#composeModal .modal-card[data-compose-theme="green"] .modal-body,
#composeModal .modal-card[data-compose-theme="green"] .modal-body p,
#composeModal .modal-card[data-compose-theme="green"] .field-label,
#composeModal .modal-card[data-compose-theme="green"] .char-count,
#composeModal .modal-card[data-compose-theme="green"] .composer-helper,
#composeModal .modal-card[data-compose-theme="green"] .support-helper,
#composeModal .modal-card[data-compose-theme="blue"] .modal-kicker,
#composeModal .modal-card[data-compose-theme="blue"] .modal-head h3,
#composeModal .modal-card[data-compose-theme="blue"] .modal-body,
#composeModal .modal-card[data-compose-theme="blue"] .modal-body p,
#composeModal .modal-card[data-compose-theme="blue"] .field-label,
#composeModal .modal-card[data-compose-theme="blue"] .char-count,
#composeModal .modal-card[data-compose-theme="blue"] .composer-helper,
#composeModal .modal-card[data-compose-theme="blue"] .support-helper,
#composeModal .modal-card[data-compose-theme="peach"] .modal-kicker,
#composeModal .modal-card[data-compose-theme="peach"] .modal-head h3,
#composeModal .modal-card[data-compose-theme="peach"] .modal-body,
#composeModal .modal-card[data-compose-theme="peach"] .modal-body p,
#composeModal .modal-card[data-compose-theme="peach"] .field-label,
#composeModal .modal-card[data-compose-theme="peach"] .char-count,
#composeModal .modal-card[data-compose-theme="peach"] .composer-helper,
#composeModal .modal-card[data-compose-theme="peach"] .support-helper,
#composeModal .modal-card[data-compose-theme="cream"] .modal-kicker,
#composeModal .modal-card[data-compose-theme="cream"] .modal-head h3,
#composeModal .modal-card[data-compose-theme="cream"] .modal-body,
#composeModal .modal-card[data-compose-theme="cream"] .modal-body p,
#composeModal .modal-card[data-compose-theme="cream"] .field-label,
#composeModal .modal-card[data-compose-theme="cream"] .char-count,
#composeModal .modal-card[data-compose-theme="cream"] .composer-helper,
#composeModal .modal-card[data-compose-theme="cream"] .support-helper,
#composeModal .modal-card[data-compose-theme="mint"] .modal-kicker,
#composeModal .modal-card[data-compose-theme="mint"] .modal-head h3,
#composeModal .modal-card[data-compose-theme="mint"] .modal-body,
#composeModal .modal-card[data-compose-theme="mint"] .modal-body p,
#composeModal .modal-card[data-compose-theme="mint"] .field-label,
#composeModal .modal-card[data-compose-theme="mint"] .char-count,
#composeModal .modal-card[data-compose-theme="mint"] .composer-helper,
#composeModal .modal-card[data-compose-theme="mint"] .support-helper,
#composeModal .modal-card[data-compose-theme="white"] .modal-kicker,
#composeModal .modal-card[data-compose-theme="white"] .modal-head h3,
#composeModal .modal-card[data-compose-theme="white"] .modal-body,
#composeModal .modal-card[data-compose-theme="white"] .modal-body p,
#composeModal .modal-card[data-compose-theme="white"] .field-label,
#composeModal .modal-card[data-compose-theme="white"] .char-count,
#composeModal .modal-card[data-compose-theme="white"] .composer-helper,
#composeModal .modal-card[data-compose-theme="white"] .support-helper,
#composeModal .modal-card[data-compose-theme="paper"] .modal-kicker,
#composeModal .modal-card[data-compose-theme="paper"] .modal-head h3,
#composeModal .modal-card[data-compose-theme="paper"] .modal-body,
#composeModal .modal-card[data-compose-theme="paper"] .modal-body p,
#composeModal .modal-card[data-compose-theme="paper"] .field-label,
#composeModal .modal-card[data-compose-theme="paper"] .char-count,
#composeModal .modal-card[data-compose-theme="paper"] .composer-helper,
#composeModal .modal-card[data-compose-theme="paper"] .support-helper,
#composeModal .modal-card[data-compose-theme="ruled"] .modal-kicker,
#composeModal .modal-card[data-compose-theme="ruled"] .modal-head h3,
#composeModal .modal-card[data-compose-theme="ruled"] .modal-body,
#composeModal .modal-card[data-compose-theme="ruled"] .modal-body p,
#composeModal .modal-card[data-compose-theme="ruled"] .field-label,
#composeModal .modal-card[data-compose-theme="ruled"] .char-count,
#composeModal .modal-card[data-compose-theme="ruled"] .composer-helper,
#composeModal .modal-card[data-compose-theme="ruled"] .support-helper,
#composeModal .modal-card[data-compose-theme="orange"] .modal-kicker,
#composeModal .modal-card[data-compose-theme="orange"] .modal-head h3,
#composeModal .modal-card[data-compose-theme="orange"] .modal-body,
#composeModal .modal-card[data-compose-theme="orange"] .modal-body p,
#composeModal .modal-card[data-compose-theme="orange"] .field-label,
#composeModal .modal-card[data-compose-theme="orange"] .char-count,
#composeModal .modal-card[data-compose-theme="orange"] .composer-helper,
#composeModal .modal-card[data-compose-theme="orange"] .support-helper,
#composeModal .modal-card[data-compose-theme="red"] .modal-kicker,
#composeModal .modal-card[data-compose-theme="red"] .modal-head h3,
#composeModal .modal-card[data-compose-theme="red"] .modal-body,
#composeModal .modal-card[data-compose-theme="red"] .modal-body p,
#composeModal .modal-card[data-compose-theme="red"] .field-label,
#composeModal .modal-card[data-compose-theme="red"] .char-count,
#composeModal .modal-card[data-compose-theme="red"] .composer-helper,
#composeModal .modal-card[data-compose-theme="red"] .support-helper{
  color:#3a3027 !important;
}
#composeModal .modal-card[data-compose-theme="navy"] .modal-kicker,
#composeModal .modal-card[data-compose-theme="navy"] .modal-head h3,
#composeModal .modal-card[data-compose-theme="navy"] .modal-body,
#composeModal .modal-card[data-compose-theme="navy"] .modal-body p,
#composeModal .modal-card[data-compose-theme="navy"] .field-label,
#composeModal .modal-card[data-compose-theme="navy"] .char-count,
#composeModal .modal-card[data-compose-theme="navy"] .composer-helper,
#composeModal .modal-card[data-compose-theme="navy"] .support-helper,
#composeModal .modal-card[data-compose-theme="black"] .modal-kicker,
#composeModal .modal-card[data-compose-theme="black"] .modal-head h3,
#composeModal .modal-card[data-compose-theme="black"] .modal-body,
#composeModal .modal-card[data-compose-theme="black"] .modal-body p,
#composeModal .modal-card[data-compose-theme="black"] .field-label,
#composeModal .modal-card[data-compose-theme="black"] .char-count,
#composeModal .modal-card[data-compose-theme="black"] .composer-helper,
#composeModal .modal-card[data-compose-theme="black"] .support-helper{
  color:#fff8ee !important;
}
#composeModal .modal-card[data-compose-theme]:not([data-compose-theme="board-green"]) .icon-close{
  background: rgba(255,248,235,.94) !important;
  color:#2f261f !important;
  border-color: rgba(255,255,255,.22) !important;
}
#composeModal .modal-card[data-compose-theme]:not([data-compose-theme="board-green"]) .composer-input,
#composeModal .modal-card[data-compose-theme]:not([data-compose-theme="board-green"]) .composer-select,
#composeModal .modal-card[data-compose-theme]:not([data-compose-theme="board-green"]) .support-textarea,
#composeModal .modal-card[data-compose-theme]:not([data-compose-theme="board-green"]) .sticker-btn,
#composeModal .modal-card[data-compose-theme]:not([data-compose-theme="board-green"]) .modal-actions .secondary-btn{
  background: rgba(255,252,246,.95) !important;
  border-color: rgba(171,145,105,.28) !important;
  color:#2f261f !important;
}
#composeModal .modal-card[data-compose-theme="orange"] .composer-input,
#composeModal .modal-card[data-compose-theme="orange"] .composer-select,
#composeModal .modal-card[data-compose-theme="orange"] .support-textarea,
#composeModal .modal-card[data-compose-theme="orange"] .sticker-btn,
#composeModal .modal-card[data-compose-theme="orange"] .modal-actions .secondary-btn,
#composeModal .modal-card[data-compose-theme="navy"] .composer-input,
#composeModal .modal-card[data-compose-theme="navy"] .composer-select,
#composeModal .modal-card[data-compose-theme="navy"] .support-textarea,
#composeModal .modal-card[data-compose-theme="navy"] .sticker-btn,
#composeModal .modal-card[data-compose-theme="navy"] .modal-actions .secondary-btn,
#composeModal .modal-card[data-compose-theme="black"] .composer-input,
#composeModal .modal-card[data-compose-theme="black"] .composer-select,
#composeModal .modal-card[data-compose-theme="black"] .support-textarea,
#composeModal .modal-card[data-compose-theme="black"] .sticker-btn,
#composeModal .modal-card[data-compose-theme="black"] .modal-actions .secondary-btn{
  background: rgba(255,251,244,.96) !important;
  color:#2f261f !important;
}

#noteModal .modal-card{
  transition: transform .22s ease, background-color .22s ease, box-shadow .22s ease, border-color .22s ease;
}
#noteModal .modal-head,
#noteModal .qr-modal-head{
  transition: background-color .22s ease, border-color .22s ease;
}
#noteModal .modal-card[data-note-theme],
#noteModal .modal-card[data-note-theme] .modal-head{
  background-image:none !important;
}
#noteModal .modal-card[data-note-theme="yellow"]{background:#f6e7aa !important;border-color:rgba(168,129,45,.46) !important;box-shadow:0 24px 56px rgba(83,63,28,.22) !important;}
#noteModal .modal-card[data-note-theme="yellow"] .modal-head{background:rgba(240,214,130,.88) !important;border-bottom-color:rgba(124,91,33,.18) !important;}
#noteModal .modal-card[data-note-theme="green"]{background:#e5efd9 !important;border-color:rgba(112,142,93,.42) !important;}
#noteModal .modal-card[data-note-theme="green"] .modal-head{background:rgba(206,226,187,.9) !important;border-bottom-color:rgba(88,112,67,.18) !important;}
#noteModal .modal-card[data-note-theme="blue"]{background:#cdeeff !important;border-color:rgba(94,146,170,.42) !important;}
#noteModal .modal-card[data-note-theme="blue"] .modal-head{background:rgba(177,225,247,.9) !important;border-bottom-color:rgba(76,118,138,.18) !important;}
#noteModal .modal-card[data-note-theme="peach"]{background:#f7ddd3 !important;border-color:rgba(175,120,103,.42) !important;}
#noteModal .modal-card[data-note-theme="peach"] .modal-head{background:rgba(245,201,190,.9) !important;border-bottom-color:rgba(127,84,73,.18) !important;}
#noteModal .modal-card[data-note-theme="cream"]{background:#fbefcf !important;border-color:rgba(170,144,82,.42) !important;}
#noteModal .modal-card[data-note-theme="cream"] .modal-head{background:rgba(247,233,182,.9) !important;border-bottom-color:rgba(129,105,57,.18) !important;}
#noteModal .modal-card[data-note-theme="mint"]{background:#e4f0ea !important;border-color:rgba(102,144,128,.42) !important;}
#noteModal .modal-card[data-note-theme="mint"] .modal-head{background:rgba(207,230,221,.9) !important;border-bottom-color:rgba(76,107,95,.18) !important;}
#noteModal .modal-card[data-note-theme="white"],
#noteModal .modal-card[data-note-theme="paper"],
#noteModal .modal-card[data-note-theme="ruled"]{background:#fffdf8 !important;border-color:rgba(160,134,92,.28) !important;}
#noteModal .modal-card[data-note-theme="white"] .modal-head,
#noteModal .modal-card[data-note-theme="paper"] .modal-head,
#noteModal .modal-card[data-note-theme="ruled"] .modal-head{background:rgba(255,247,228,.92) !important;border-bottom-color:rgba(124,94,55,.16) !important;}
#noteModal .modal-card[data-note-theme="orange"]{background:#ffbf78 !important;border-color:rgba(156,94,22,.34) !important;box-shadow:0 24px 56px rgba(120,78,22,.22) !important;}
#noteModal .modal-card[data-note-theme="orange"] .modal-head{background:rgba(255,177,86,.92) !important;border-bottom-color:rgba(137,82,18,.18) !important;}
#noteModal .modal-card[data-note-theme="red"]{background:#ff8f86 !important;border-color:rgba(146,64,58,.42) !important;}
#noteModal .modal-card[data-note-theme="red"] .modal-head{background:rgba(252,121,109,.9) !important;border-bottom-color:rgba(132,56,48,.2) !important;}
#noteModal .modal-card[data-note-theme="navy"]{background:#2e5570 !important;border-color:rgba(207,225,239,.24) !important;box-shadow:0 24px 56px rgba(18,32,46,.34) !important;}
#noteModal .modal-card[data-note-theme="navy"] .modal-head{background:rgba(29,76,105,.92) !important;border-bottom-color:rgba(227,237,247,.16) !important;}
#noteModal .modal-card[data-note-theme="black"]{background:#2f2a25 !important;border-color:rgba(255,255,255,.16) !important;box-shadow:0 24px 56px rgba(13,10,8,.42) !important;}
#noteModal .modal-card[data-note-theme="black"] .modal-head{background:rgba(39,34,30,.94) !important;border-bottom-color:rgba(255,255,255,.12) !important;}
#noteModal .modal-card[data-note-theme="orange"] .modal-kicker,
#noteModal .modal-card[data-note-theme="orange"] .modal-head h3,
#noteModal .modal-card[data-note-theme="orange"] .modal-body,
#noteModal .modal-card[data-note-theme="orange"] .modal-body p,
#noteModal .modal-card[data-note-theme="orange"] .field-label,
#noteModal .modal-card[data-note-theme="orange"] .char-count,
#noteModal .modal-card[data-note-theme="orange"] .modal-body label,
#noteModal .modal-card[data-note-theme="navy"] .modal-kicker,
#noteModal .modal-card[data-note-theme="navy"] .modal-head h3,
#noteModal .modal-card[data-note-theme="navy"] .modal-body,
#noteModal .modal-card[data-note-theme="navy"] .modal-body p,
#noteModal .modal-card[data-note-theme="navy"] .field-label,
#noteModal .modal-card[data-note-theme="navy"] .char-count,
#noteModal .modal-card[data-note-theme="navy"] .modal-body label,
#noteModal .modal-card[data-note-theme="black"] .modal-kicker,
#noteModal .modal-card[data-note-theme="black"] .modal-head h3,
#noteModal .modal-card[data-note-theme="black"] .modal-body,
#noteModal .modal-card[data-note-theme="black"] .modal-body p,
#noteModal .modal-card[data-note-theme="black"] .field-label,
#noteModal .modal-card[data-note-theme="black"] .char-count,
#noteModal .modal-card[data-note-theme="black"] .modal-body label{
  color:#fff8ee !important;
}
#noteModal .modal-card[data-note-theme="navy"] .icon-close,
#noteModal .modal-card[data-note-theme="black"] .icon-close{
  background:rgba(255,250,242,.95) !important;
  color:#2f261f !important;
  border-color:rgba(255,255,255,.18) !important;
}
#noteModal .modal-card[data-note-theme="yellow"] .opened-note,
#noteModal .modal-card[data-note-theme="green"] .opened-note,
#noteModal .modal-card[data-note-theme="blue"] .opened-note,
#noteModal .modal-card[data-note-theme="peach"] .opened-note,
#noteModal .modal-card[data-note-theme="cream"] .opened-note,
#noteModal .modal-card[data-note-theme="mint"] .opened-note,
#noteModal .modal-card[data-note-theme="white"] .opened-note,
#noteModal .modal-card[data-note-theme="paper"] .opened-note,
#noteModal .modal-card[data-note-theme="ruled"] .opened-note,
#noteModal .modal-card[data-note-theme="red"] .opened-note{
  background:rgba(255,251,244,.70) !important;
}
#noteModal .modal-card[data-note-theme="navy"] .opened-note,
#noteModal .modal-card[data-note-theme="black"] .opened-note{
  background:rgba(255,251,244,.10) !important;
  border-color:rgba(255,255,255,.14) !important;
}
#noteModal .modal-card[data-note-theme] .support-textarea{
  background:rgba(255,252,246,.92) !important;
}
#noteModal .modal-card[data-note-theme="navy"] .support-textarea,
#noteModal .modal-card[data-note-theme="black"] .support-textarea{
  background:rgba(255,251,244,.96) !important;
  color:#2f261f !important;
}

#readModal .modal-card[data-read-theme],
#readModal .modal-card[data-read-theme] .modal-head{
  background-image:none !important;
}
#readModal .modal-card[data-read-theme="yellow"]{background:#f6e7aa !important;border-color:rgba(168,129,45,.46) !important;box-shadow:0 24px 56px rgba(83,63,28,.22) !important;}
#readModal .modal-card[data-read-theme="yellow"] .modal-head{background:rgba(240,214,130,.88) !important;border-bottom-color:rgba(124,91,33,.18) !important;}
#readModal .modal-card[data-read-theme="green"]{background:#e5efd9 !important;border-color:rgba(112,142,93,.42) !important;}
#readModal .modal-card[data-read-theme="green"] .modal-head{background:rgba(206,226,187,.9) !important;border-bottom-color:rgba(88,112,67,.18) !important;}
#readModal .modal-card[data-read-theme="blue"]{background:#cdeeff !important;border-color:rgba(94,146,170,.42) !important;}
#readModal .modal-card[data-read-theme="blue"] .modal-head{background:rgba(177,225,247,.9) !important;border-bottom-color:rgba(76,118,138,.18) !important;}
#readModal .modal-card[data-read-theme="peach"]{background:#f7ddd3 !important;border-color:rgba(175,120,103,.42) !important;}
#readModal .modal-card[data-read-theme="peach"] .modal-head{background:rgba(245,201,190,.9) !important;border-bottom-color:rgba(127,84,73,.18) !important;}
#readModal .modal-card[data-read-theme="cream"]{background:#fbefcf !important;border-color:rgba(170,144,82,.42) !important;}
#readModal .modal-card[data-read-theme="cream"] .modal-head{background:rgba(247,233,182,.9) !important;border-bottom-color:rgba(129,105,57,.18) !important;}
#readModal .modal-card[data-read-theme="mint"]{background:#e4f0ea !important;border-color:rgba(102,144,128,.42) !important;}
#readModal .modal-card[data-read-theme="mint"] .modal-head{background:rgba(207,230,221,.9) !important;border-bottom-color:rgba(76,107,95,.18) !important;}
#readModal .modal-card[data-read-theme="white"],
#readModal .modal-card[data-read-theme="paper"],
#readModal .modal-card[data-read-theme="ruled"]{background:#fffdf8 !important;border-color:rgba(160,134,92,.28) !important;}
#readModal .modal-card[data-read-theme="white"] .modal-head,
#readModal .modal-card[data-read-theme="paper"] .modal-head,
#readModal .modal-card[data-read-theme="ruled"] .modal-head{background:rgba(255,247,228,.92) !important;border-bottom-color:rgba(124,94,55,.16) !important;}
#readModal .modal-card[data-read-theme="orange"]{background:#ffbf78 !important;border-color:rgba(156,94,22,.34) !important;box-shadow:0 24px 56px rgba(120,78,22,.22) !important;}
#readModal .modal-card[data-read-theme="orange"] .modal-head{background:rgba(255,177,86,.92) !important;border-bottom-color:rgba(137,82,18,.18) !important;}
#readModal .modal-card[data-read-theme="red"]{background:#ff8f86 !important;border-color:rgba(146,64,58,.42) !important;}
#readModal .modal-card[data-read-theme="red"] .modal-head{background:rgba(252,121,109,.9) !important;border-bottom-color:rgba(132,56,48,.2) !important;}
#readModal .modal-card[data-read-theme="navy"]{background:#2e5570 !important;border-color:rgba(207,225,239,.24) !important;box-shadow:0 24px 56px rgba(18,32,46,.34) !important;}
#readModal .modal-card[data-read-theme="navy"] .modal-head{background:rgba(29,76,105,.92) !important;border-bottom-color:rgba(227,237,247,.16) !important;}
#readModal .modal-card[data-read-theme="black"]{background:#2f2a25 !important;border-color:rgba(255,255,255,.16) !important;box-shadow:0 24px 56px rgba(13,10,8,.42) !important;}
#readModal .modal-card[data-read-theme="black"] .modal-head{background:rgba(39,34,30,.94) !important;border-bottom-color:rgba(255,255,255,.12) !important;}
#readModal .modal-card[data-read-theme="orange"] .modal-kicker,
#readModal .modal-card[data-read-theme="orange"] .modal-head h3,
#readModal .modal-card[data-read-theme="orange"] .modal-body,
#readModal .modal-card[data-read-theme="orange"] .modal-body p,
#readModal .modal-card[data-read-theme="orange"] .read-modal-meta,
#readModal .modal-card[data-read-theme="navy"] .modal-kicker,
#readModal .modal-card[data-read-theme="navy"] .modal-head h3,
#readModal .modal-card[data-read-theme="navy"] .modal-body,
#readModal .modal-card[data-read-theme="navy"] .modal-body p,
#readModal .modal-card[data-read-theme="navy"] .read-modal-meta,
#readModal .modal-card[data-read-theme="black"] .modal-kicker,
#readModal .modal-card[data-read-theme="black"] .modal-head h3,
#readModal .modal-card[data-read-theme="black"] .modal-body,
#readModal .modal-card[data-read-theme="black"] .modal-body p,
#readModal .modal-card[data-read-theme="black"] .read-modal-meta{
  color:#fff8ee !important;
}
#readModal .modal-card[data-read-theme="navy"] .icon-close,
#readModal .modal-card[data-read-theme="black"] .icon-close{
  background:rgba(255,250,242,.95) !important;
  color:#2f261f !important;
  border-color:rgba(255,255,255,.18) !important;
}
#readModal .modal-card[data-read-theme="yellow"] .opened-note,
#readModal .modal-card[data-read-theme="green"] .opened-note,
#readModal .modal-card[data-read-theme="blue"] .opened-note,
#readModal .modal-card[data-read-theme="peach"] .opened-note,
#readModal .modal-card[data-read-theme="cream"] .opened-note,
#readModal .modal-card[data-read-theme="mint"] .opened-note,
#readModal .modal-card[data-read-theme="white"] .opened-note,
#readModal .modal-card[data-read-theme="paper"] .opened-note,
#readModal .modal-card[data-read-theme="ruled"] .opened-note,
#readModal .modal-card[data-read-theme="red"] .opened-note{
  background:rgba(255,251,244,.70) !important;
}
#readModal .modal-card[data-read-theme="navy"] .opened-note,
#readModal .modal-card[data-read-theme="black"] .opened-note{
  background:rgba(255,251,244,.10) !important;
  border-color:rgba(255,255,255,.14) !important;
}

/* v64: enlarge top hero navigation labels for readability */
.hero-actions .btn,
.hero-actions .hero-link-btn,
.hero-actions .top-icon-menu summary{
  font-size:17px !important;
  line-height:1.25 !important;
}

@media (max-width: 980px){
  .hero-actions .btn,
  .hero-actions .hero-link-btn,
  .hero-actions .top-icon-menu summary{
    font-size:15.5px !important;
    line-height:1.3 !important;
  }
}


/* v4 fix: edit popup must use solid note color, not translucent */
#composeModal .modal-card,
#composeModal .modal-head{
  opacity:1 !important;
}
#composeModal .modal-card{
  isolation:isolate !important;
  background-clip:padding-box !important;
}
#composeModal .modal-card[data-compose-theme="board-green"]{
  background:
    radial-gradient(circle at 12% 14%, rgba(255,255,255,.12), transparent 20%),
    radial-gradient(rgba(237,223,167,.12) 1.1px, transparent 1.1px),
    linear-gradient(180deg, #155f55 0%, #0f584f 52%, #0c4d46 100%) !important;
  background-size:auto, 18px 18px, auto !important;
  border-color: rgba(223,188,103,.82) !important;
  box-shadow: 0 26px 70px rgba(9,42,38,.42) !important;
}
#composeModal .modal-card[data-compose-theme="board-green"]::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 22%, rgba(0,0,0,.05) 100%);
  pointer-events:none;
}
#composeModal .modal-card[data-compose-theme="board-green"] .modal-head{
  background:linear-gradient(180deg, rgba(7,66,59,.92), rgba(11,79,71,.82)) !important;
  border-bottom-color: rgba(230,215,173,.22) !important;
}
#composeModal .modal-card[data-compose-theme="board-green"] .composer-input,
#composeModal .modal-card[data-compose-theme="board-green"] .composer-select,
#composeModal .modal-card[data-compose-theme="board-green"] .support-textarea{
  background:#fffbf2 !important;
  border-color: rgba(212,189,128,.46) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 4px 0 rgba(111,88,40,.08) !important;
}
#composeModal .modal-card[data-compose-theme="board-green"] .sticker-btn,
#composeModal .modal-card[data-compose-theme="board-green"] .modal-actions .secondary-btn{
  background:#fff7ea !important;
  border-color: rgba(212,189,128,.38) !important;
}
#composeModal .modal-card[data-compose-theme="board-green"] .modal-actions .btn.primary{
  background:linear-gradient(180deg,#ff9d8f,#ff8172) !important;
  box-shadow:0 6px 18px rgba(120,52,42,.22) !important;
}
#composeModal .modal-card[data-compose-theme="yellow"] .modal-head{background:#f0d682 !important;}
#composeModal .modal-card[data-compose-theme="green"] .modal-head{background:#cee2bb !important;}
#composeModal .modal-card[data-compose-theme="blue"] .modal-head{background:#b1e1f7 !important;}
#composeModal .modal-card[data-compose-theme="peach"] .modal-head{background:#f5c9be !important;}
#composeModal .modal-card[data-compose-theme="cream"] .modal-head{background:#f7e9b6 !important;}
#composeModal .modal-card[data-compose-theme="mint"] .modal-head{background:#cfe6dd !important;}
#composeModal .modal-card[data-compose-theme="white"] .modal-head,
#composeModal .modal-card[data-compose-theme="paper"] .modal-head,
#composeModal .modal-card[data-compose-theme="ruled"] .modal-head{background:#fff7e4 !important;}
#composeModal .modal-card[data-compose-theme="orange"] .modal-head{background:#ffb156 !important;}
#composeModal .modal-card[data-compose-theme="red"] .modal-head{background:#fc796d !important;}
#composeModal .modal-card[data-compose-theme="navy"] .modal-head{background:#1d4c69 !important;}
#composeModal .modal-card[data-compose-theme="black"] .modal-head{background:#27221e !important;}

/* v10: simplify Start writing a feeling with transparent fill, bold yellow outline, and larger text */
.hero-actions #openComposeBtn{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  padding:10px 20px !important;
  border:4px solid #f0cb5c !important;
  border-radius:999px !important;
  background:transparent !important;
  color:#f6a9a3 !important;
  box-shadow:0 8px 22px rgba(18,73,66,.12) !important;
  text-decoration:none !important;
  font-size:18px !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  line-height:1.12 !important;
  text-shadow:0 1px 0 rgba(17,60,55,.18) !important;
  transform:translateY(-1px) !important;
}
.hero-actions #openComposeBtn::before{
  content:none !important;
  display:none !important;
}
.hero-actions #openComposeBtn::after{
  content:"new";
  position:absolute;
  top:-10px;
  right:12px;
  padding:2px 8px;
  border-radius:999px;
  background:#ffe08a;
  color:#74542c;
  border:2px solid rgba(162,121,43,.42);
  font-family:Inter, system-ui, sans-serif;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 3px 8px rgba(116,84,44,.14);
}
.hero-actions #openComposeBtn:hover{
  transform:translateY(-2px) scale(1.01) !important;
  box-shadow:0 12px 26px rgba(18,73,66,.16) !important;
}
.hero-actions #openComposeBtn:focus-visible{
  outline:3px solid rgba(255,239,167,.92) !important;
  outline-offset:4px !important;
}

@media (max-width: 980px){
  .hero-actions #openComposeBtn{
    font-size:16px !important;
    padding:9px 16px !important;
  }
  .hero-actions #openComposeBtn::after{
    right:9px;
    top:-8px;
    font-size:8px;
    padding:1px 6px;
  }
}


/* Delete confirm modal */
.confirm-backdrop{background:rgba(8,16,19,.52) !important;backdrop-filter:blur(10px);}
.confirm-card{width:min(520px,calc(100vw - 32px)) !important;max-width:520px !important;background:linear-gradient(180deg,rgba(18,79,71,.98),rgba(16,104,92,.98)) !important;border:4px solid #e1bf64 !important;border-radius:30px !important;box-shadow:0 26px 64px rgba(9,33,31,.34) !important;overflow:hidden;}
.confirm-card::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.08) 1.1px,transparent 1.1px);background-size:16px 16px;opacity:.35;}
.confirm-card::after{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg);width:92px;height:24px;border-radius:7px;background:rgba(246,234,190,.92);box-shadow:0 10px 18px rgba(20,39,38,.16);}
.confirm-head{background:transparent !important;border-bottom:1px dashed rgba(245,224,165,.28) !important;padding-bottom:18px !important;}
.confirm-card .modal-kicker,.confirm-card .modal-head h3,.confirm-card .confirm-copy{color:#fff8e9 !important;}
.confirm-card .modal-head h3{font-size:clamp(28px,3.1vw,36px) !important;line-height:1.02;}
.confirm-body{display:grid;gap:18px;padding-top:20px !important;}
.confirm-icon{width:66px;height:66px;border-radius:18px;display:grid;place-items:center;font-size:32px;background:rgba(255,243,219,.16);border:2px solid rgba(239,203,111,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);}
.confirm-copy{margin:0;font-size:18px;line-height:1.7;font-weight:700;max-width:40ch;}
.confirm-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;padding-top:4px;}
.danger-btn{background:linear-gradient(180deg,#ff9d83,#f36f62) !important;color:#fffaf2 !important;border:2px solid rgba(156,70,61,.34) !important;box-shadow:0 10px 22px rgba(150,68,60,.22) !important;}
.danger-btn:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(150,68,60,.28) !important;}
.confirm-card .secondary-btn{background:rgba(255,250,240,.94) !important;color:#2c2a28 !important;border:2px solid rgba(224,191,100,.45) !important;}
@media (max-width:760px){.confirm-card{width:min(100vw - 20px,520px) !important;border-radius:24px !important;}.confirm-card .modal-head h3{font-size:30px !important;}.confirm-copy{font-size:17px;}.confirm-actions{justify-content:stretch;}.confirm-actions .btn{flex:1 1 180px;justify-content:center;}}


/* v14: refine language picker layout and styling */
.hero-actions .language-picker{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  min-height:48px;
  padding:0 2px 0 0;
  color:#f7efda;
  font-weight:800;
  flex:0 1 auto;
  white-space:nowrap;
}
.hero-actions .language-picker-label{
  display:inline-block;
  color:#f6edd7;
  font-size:clamp(15px,1.4vw,17px);
  font-weight:900;
  letter-spacing:-.01em;
  text-shadow:0 1px 0 rgba(10,47,43,.2);
}
.hero-actions .language-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  min-width:220px;
  height:46px;
  padding:0 42px 0 14px;
  border:2px solid rgba(225,191,100,.72);
  border-radius:14px;
  background-color:rgba(255,249,239,.98);
  background-image:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,238,220,.98)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5' fill='none' stroke='%23957b43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;
  background-position:0 0, right 12px center;
  background-size:auto, 18px 18px;
  color:#3d3026;
  font-family:inherit;
  font-size:16px;
  font-weight:800;
  line-height:1.2;
  box-shadow:0 8px 18px rgba(11,57,51,.10);
  cursor:pointer;
}
.hero-actions .language-select:hover{
  border-color:#f0cb5c;
  box-shadow:0 10px 22px rgba(11,57,51,.14);
}
.hero-actions .language-select:focus-visible{
  outline:3px solid rgba(255,239,167,.92);
  outline-offset:3px;
}
.hero-actions .language-select option{
  color:#2f261f;
}
@media (max-width: 980px){
  .hero-actions .language-picker{
    gap:8px !important;
  }
  .hero-actions .language-picker-label{
    font-size:15px;
  }
  .hero-actions .language-select{
    min-width:170px;
    height:42px;
    font-size:15px;
    padding-left:12px;
    padding-right:38px;
  }
}
@media (max-width: 640px){
  .hero-actions .language-picker{
    width:100%;
    justify-content:flex-start;
  }
  .hero-actions .language-select{
    min-width:0;
    width:min(100%, 220px);
  }
}


/* v15: language picker as submenu like Collections with flags */
.hero-actions .language-picker{display:none !important;}
.hero-actions .language-menu{min-height:48px;flex:0 0 auto;}
.hero-actions .language-menu summary{display:inline-flex;align-items:center;gap:10px;}
.hero-actions .language-current-flag,.hero-actions .language-flag{display:inline-flex;align-items:center;justify-content:center;font-size:1.05em;line-height:1;min-width:1.35em;}
.hero-actions .language-current-label,.hero-actions .language-name{display:inline-block;}
.hero-actions .language-dropdown-list{min-width:220px;}
.hero-actions .language-option{display:flex !important;align-items:center;gap:10px;justify-content:flex-start;width:100%;text-align:left;}
.hero-actions .language-option.is-active{color:#fff7cf !important;text-decoration-color:rgba(240,203,92,.95) !important;}
.hero-actions .language-option.is-active .language-name{font-weight:900;}
@media (max-width:760px){
  .hero-actions .language-menu{width:100%;}
  .hero-actions .language-menu summary{width:100%;justify-content:flex-start;}
  .hero-actions .language-dropdown-list{width:min(100%,260px);}
}


/* v18: use SVG flag icons instead of emoji for cross-platform support */
.hero-actions .language-current-flag,
.hero-actions .language-flag{
  width:20px;
  height:14px;
  min-width:20px;
  border-radius:3px;
  border:1px solid rgba(255,247,207,.28);
  box-shadow:0 1px 0 rgba(0,0,0,.15);
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
.hero-actions .language-current-flag{width:22px;height:15px;min-width:22px;}
.hero-actions .flag-us{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'><rect width='60' height='42' fill='%23b22234'/><g fill='%23fff'><rect y='3.23' width='60' height='3.23'/><rect y='9.69' width='60' height='3.23'/><rect y='16.15' width='60' height='3.23'/><rect y='22.61' width='60' height='3.23'/><rect y='29.07' width='60' height='3.23'/><rect y='35.53' width='60' height='3.23'/></g><rect width='24' height='22.6' fill='%233c3b6e'/><g fill='%23fff'><circle cx='3' cy='3' r='1'/><circle cx='9' cy='3' r='1'/><circle cx='15' cy='3' r='1'/><circle cx='21' cy='3' r='1'/><circle cx='6' cy='6' r='1'/><circle cx='12' cy='6' r='1'/><circle cx='18' cy='6' r='1'/><circle cx='3' cy='9' r='1'/><circle cx='9' cy='9' r='1'/><circle cx='15' cy='9' r='1'/><circle cx='21' cy='9' r='1'/><circle cx='6' cy='12' r='1'/><circle cx='12' cy='12' r='1'/><circle cx='18' cy='12' r='1'/><circle cx='3' cy='15' r='1'/><circle cx='9' cy='15' r='1'/><circle cx='15' cy='15' r='1'/><circle cx='21' cy='15' r='1'/><circle cx='6' cy='18' r='1'/><circle cx='12' cy='18' r='1'/><circle cx='18' cy='18' r='1'/></g></svg>");}
.hero-actions .flag-kr{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'><rect width='60' height='42' fill='%23fff'/><g fill='none' stroke='%23000' stroke-width='2.4'><path d='M8 8h10M8 12h10M8 16h10'/><path d='M42 26h10M42 30h10M42 34h10'/><path d='M42 8h10M42 12h4m6 0h0M48 16h4'/><path d='M8 26h4m6 0h0M14 30h4M8 34h10'/></g><g transform='translate(30 21)'><path d='M0-9a9 9 0 1 1 0 18c5 0 9-4 9-9s-4-9-9-9z' fill='%23cd2e3a'/><path d='M0 9a9 9 0 1 1 0-18c-5 0-9 4-9 9s4 9 9 9z' fill='%230047a0'/><circle cy='-4.5' r='4.5' fill='%230047a0'/><circle cy='4.5' r='4.5' fill='%23cd2e3a'/></g></svg>");}
.hero-actions .flag-cn{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'><rect width='60' height='42' fill='%23de2910'/><g fill='%23ffde00'><polygon points='10,5 11.8,10.5 17.6,10.5 12.9,13.9 14.7,19.4 10,16 5.3,19.4 7.1,13.9 2.4,10.5 8.2,10.5'/><polygon points='21,5 22,7.7 24.9,7.8 22.6,9.4 23.5,12.1 21,10.5 18.5,12.1 19.4,9.4 17.1,7.8 20,7.7'/><polygon points='26,10 27,12.7 29.9,12.8 27.6,14.4 28.5,17.1 26,15.5 23.5,17.1 24.4,14.4 22.1,12.8 25,12.7'/><polygon points='26,18 27,20.7 29.9,20.8 27.6,22.4 28.5,25.1 26,23.5 23.5,25.1 24.4,22.4 22.1,20.8 25,20.7'/><polygon points='21,23 22,25.7 24.9,25.8 22.6,27.4 23.5,30.1 21,28.5 18.5,30.1 19.4,27.4 17.1,25.8 20,25.7'/></g></svg>");}
.hero-actions .flag-jp{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'><rect width='60' height='42' fill='%23fff'/><circle cx='30' cy='21' r='11' fill='%23bc002d'/></svg>");}
.hero-actions .flag-id{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'><rect width='60' height='21' fill='%23ce1126'/><rect y='21' width='60' height='21' fill='%23fff'/></svg>");}
.hero-actions .flag-es{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'><rect width='60' height='42' fill='%23aa151b'/><rect y='10.5' width='60' height='21' fill='%23f1bf00'/></svg>");}
.hero-actions .flag-pt{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'><rect width='24' height='42' fill='%2300602f'/><rect x='24' width='36' height='42' fill='%23ff0000'/><circle cx='24' cy='21' r='7' fill='none' stroke='%23ffcc33' stroke-width='2'/></svg>");}
.hero-actions .flag-in{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'><rect width='60' height='14' fill='%23ff9933'/><rect y='14' width='60' height='14' fill='%23fff'/><rect y='28' width='60' height='14' fill='%23138808'/><circle cx='30' cy='21' r='4.2' fill='none' stroke='%23000080' stroke-width='1.4'/><g stroke='%23000080' stroke-width='.7'><path d='M30 16.8v8.4M25.8 21h8.4M27.1 18.1l5.8 5.8M32.9 18.1l-5.8 5.8'/></g></svg>");}
.hero-actions .flag-th{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'><rect width='60' height='42' fill='%23a51931'/><rect y='7' width='60' height='7' fill='%23fff'/><rect y='14' width='60' height='14' fill='%232d2a4a'/><rect y='28' width='60' height='7' fill='%23fff'/></svg>");}
.hero-actions .flag-ar{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'><rect width='60' height='42' fill='%23006c35'/><rect y='14' width='60' height='14' fill='%23ffffff'/><rect y='28' width='60' height='14' fill='%23000000'/><text x='30' y='26' text-anchor='middle' font-size='8' font-family='Arial' fill='%23006c35'>AR</text></svg>");}


/* v30 QA polish */
.hero-actions .top-icon-menu > summary[aria-expanded="true"]{text-decoration-color:rgba(240,203,92,.95) !important;}
.hero-actions .language-dropdown-list{max-height:min(70vh,420px);overflow:auto;overscroll-behavior:contain;}
.hero-actions .language-option[aria-current="true"]{background:rgba(255,245,189,.12);}
@media (max-width:980px){
  .hero-actions{align-items:stretch;}
  .hero-actions .hero-link-btn,
  .hero-actions .top-icon-menu,
  .hero-actions #openComposeBtn{width:100%;}
}
@media (max-width:760px){
  .hero-actions{gap:10px;}
  .hero-actions .language-dropdown-list,
  .hero-actions .collections-dropdown-list{width:min(100%,320px);max-width:100%;}
  .hero-actions .top-icon-menu[open]{z-index:35;}
}


/* v34: language-safe font stacks by locale to reduce glyph fallback issues */
html{
  --font-ui:"Inter","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Inter","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-note:var(--font-ui);
  --ui-line-height:1.55;
  --display-line-height:1.18;
}

html[lang="en"],
html[lang="id"],
html[lang="es"],
html[lang="pt"]{
  --font-ui:"Inter","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Inter","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-note:var(--font-ui);
  --ui-line-height:1.55;
  --display-line-height:1.16;
}

html[lang="th"]{
  --font-ui:"Noto Sans Thai","Tahoma","Leelawadee UI","Sarabun","Segoe UI",system-ui,sans-serif;
  --font-display:"Noto Sans Thai","Tahoma","Leelawadee UI","Sarabun","Segoe UI",system-ui,sans-serif;
  --font-note:var(--font-ui);
  --ui-line-height:1.72;
  --display-line-height:1.24;
}

html[lang="ja"]{
  --font-ui:"Noto Sans JP","Hiragino Sans","Yu Gothic UI","Meiryo","MS PGothic",system-ui,sans-serif;
  --font-display:"Noto Sans JP","Hiragino Sans","Yu Gothic UI","Meiryo","MS PGothic",system-ui,sans-serif;
  --font-note:var(--font-ui);
  --ui-line-height:1.7;
  --display-line-height:1.22;
}

html[lang="ko"]{
  --font-ui:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","Nanum Gothic","Segoe UI",system-ui,sans-serif;
  --font-display:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic","Nanum Gothic","Segoe UI",system-ui,sans-serif;
  --font-note:var(--font-ui);
  --ui-line-height:1.66;
  --display-line-height:1.2;
}

html[lang="zh"]{
  --font-ui:"Noto Sans SC","PingFang SC","Microsoft YaHei","Heiti SC","SimHei",system-ui,sans-serif;
  --font-display:"Noto Sans SC","PingFang SC","Microsoft YaHei","Heiti SC","SimHei",system-ui,sans-serif;
  --font-note:var(--font-ui);
  --ui-line-height:1.68;
  --display-line-height:1.2;
}

html[lang="hi"]{
  --font-ui:"Noto Sans Devanagari","Mangal","Nirmala UI","Kohinoor Devanagari","Segoe UI",system-ui,sans-serif;
  --font-display:"Noto Sans Devanagari","Mangal","Nirmala UI","Kohinoor Devanagari","Segoe UI",system-ui,sans-serif;
  --font-note:var(--font-ui);
  --ui-line-height:1.8;
  --display-line-height:1.28;
}

body, button, input, select, textarea,
.hero-summary,
.modal-body,
.modal-copy,
.note .body,
.note .meta,
.note .reply-label,
.note .note-support-item,
.dropdown-item,
.top-icon-menu summary,
.brand-sub,
.visit-count,
.storage-status,
.pager,
.pager-btn,
.toast,
.read-modal-body,
.read-modal-meta,
.read-modal-actions .btn,
.support-list,
.support-item,
.compose-form,
.reply-form{
  line-height:var(--ui-line-height) !important;
}

.heading h1,
.section-head h2,
.section-head h4,
.brand-title,
.brand-kicker,
.footer-card h5,
.modal-title,
.note .title,
.note .name{
  line-height:var(--display-line-height) !important;
}

.heading h1,
.section-head h2,
.section-head h4,
.brand-title,
.brand-kicker,
.board-footer,
.footer-card h5,
.top-icon-menu summary,
.btn,
.dropdown-item,
.hero-link-btn,
.brand-sub{
  font-family:var(--font-display) !important;
}

.note .name,
.note .title,
.note .body,
.note .meta,
.note .badge,
.note .reply-label,
.note .note-support-item,
.note .note-support-item .only-text,
.note .read-btn,
.note .reply-btn,
.note .post-text-action,
.note .note-support-action,
.modal-card,
.modal-card *:not(.icon-badge):not(.sticker-chip),
.read-modal,
.read-modal *{
  font-family:var(--font-note) !important;
}

html[lang="th"] .note .title,
html[lang="ja"] .note .title,
html[lang="ko"] .note .title,
html[lang="zh"] .note .title,
html[lang="hi"] .note .title{
  text-transform:none !important;
  letter-spacing:0 !important;
}

html[lang="th"] .heading h1,
html[lang="ja"] .heading h1,
html[lang="ko"] .heading h1,
html[lang="zh"] .heading h1,
html[lang="hi"] .heading h1,
html[lang="th"] .section-head h2,
html[lang="ja"] .section-head h2,
html[lang="ko"] .section-head h2,
html[lang="zh"] .section-head h2,
html[lang="hi"] .section-head h2{
  text-transform:none !important;
  letter-spacing:-0.01em !important;
}

/* v36: make top-right brand copy resilient for longer translations */
.hero{
  grid-template-columns:minmax(0, 1fr) minmax(360px, 500px) !important;
  align-items:start !important;
}
.header-illustration,
.brand-logo,
.brand-copy{
  min-width:0 !important;
  max-width:100% !important;
}
.brand-logo{
  display:grid !important;
  grid-template-columns:auto minmax(0, 1fr) !important;
  align-items:center !important;
  column-gap:18px !important;
}
.brand-copy{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  gap:8px !important;
}
.brand-kicker{
  max-width:100% !important;
  line-height:1.2 !important;
}
.brand-title{
  width:100% !important;
  max-width:100% !important;
  font-size:clamp(18px, 2.4vw, 24px) !important;
  line-height:1.2 !important;
  letter-spacing:0 !important;
}
.brand-title span{
  display:block !important;
  max-width:100% !important;
  white-space:normal !important;
  text-wrap:balance;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}
.brand-sub{
  max-width:min(100%, 360px) !important;
  width:max-content !important;
  min-width:0 !important;
  white-space:normal !important;
}
.coffee-text{
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}

html[lang="pt"] .brand-title,
html[lang="es"] .brand-title,
html[lang="id"] .brand-title{
  font-size:clamp(17px, 2.15vw, 22px) !important;
}

html[lang="th"] .brand-title,
html[lang="ko"] .brand-title,
html[lang="ja"] .brand-title,
html[lang="zh"] .brand-title,
html[lang="hi"] .brand-title{
  font-size:clamp(17px, 2.1vw, 22px) !important;
  line-height:1.28 !important;
}

@media (max-width: 980px){
  .hero{
    grid-template-columns:1fr !important;
  }
  .header-illustration{
    width:100% !important;
  }
  .brand-logo{
    width:100% !important;
    grid-template-columns:64px minmax(0,1fr) !important;
    column-gap:14px !important;
  }
  .brand-title{
    font-size:clamp(16px, 4.2vw, 22px) !important;
  }
  .brand-sub{
    max-width:100% !important;
    width:fit-content !important;
  }
}

@media (max-width: 640px){
  .brand-logo{
    grid-template-columns:56px minmax(0,1fr) !important;
    align-items:start !important;
  }
  .brand-title{
    font-size:clamp(15px, 4.8vw, 20px) !important;
    line-height:1.32 !important;
  }
  .brand-sub{
    width:100% !important;
    max-width:100% !important;
    justify-content:space-between !important;
  }
}


/* v37: tighten long-language hero copy and top navigation labels */
.hero{
  grid-template-columns:minmax(0, 1fr) minmax(430px, 590px) !important;
  column-gap:28px !important;
}
.header-illustration{
  max-width:590px !important;
}
.brand-logo{
  max-width:590px !important;
  grid-template-columns:84px minmax(0,1fr) !important;
  align-items:start !important;
}
.brand-copy{
  gap:6px !important;
}
.brand-kicker{
  font-size:13px !important;
  letter-spacing:.04em !important;
}
.brand-title{
  font-size:clamp(17px, 1.7vw, 22px) !important;
  line-height:1.22 !important;
  text-wrap:balance !important;
}
.brand-title span{
  max-inline-size:30ch !important;
}
.brand-sub{
  font-size:14px !important;
  max-width:min(100%, 340px) !important;
  padding:8px 10px 8px 14px !important;
}
.coffee-text{
  line-height:1.22 !important;
}
.hero-actions .btn,
.hero-actions .hero-link-btn,
.hero-actions .top-icon-menu summary{
  font-size:15px !important;
  padding-left:10px !important;
  padding-right:10px !important;
  text-wrap:balance !important;
}
.hero-actions .hero-link-btn,
.hero-actions .top-icon-menu,
.hero-actions .top-icon-menu summary{
  min-width:0 !important;
}
.hero-actions{
  row-gap:12px !important;
}

html[lang="es"] .brand-title,
html[lang="pt"] .brand-title,
html[lang="id"] .brand-title{
  font-size:clamp(16px, 1.5vw, 20px) !important;
  line-height:1.24 !important;
}
html[lang="th"] .brand-title,
html[lang="ko"] .brand-title,
html[lang="ja"] .brand-title,
html[lang="zh"] .brand-title,
html[lang="hi"] .brand-title{
  font-size:clamp(15px, 1.45vw, 19px) !important;
  line-height:1.3 !important;
}
html[lang="th"] .brand-sub,
html[lang="ko"] .brand-sub,
html[lang="ja"] .brand-sub,
html[lang="zh"] .brand-sub,
html[lang="hi"] .brand-sub,
html[lang="es"] .brand-sub,
html[lang="pt"] .brand-sub,
html[lang="id"] .brand-sub{
  font-size:13px !important;
  max-width:min(100%, 320px) !important;
}
html[lang="es"] .hero-actions .btn,
html[lang="es"] .hero-actions .hero-link-btn,
html[lang="es"] .hero-actions .top-icon-menu summary,
html[lang="pt"] .hero-actions .btn,
html[lang="pt"] .hero-actions .hero-link-btn,
html[lang="pt"] .hero-actions .top-icon-menu summary,
html[lang="id"] .hero-actions .btn,
html[lang="id"] .hero-actions .hero-link-btn,
html[lang="id"] .hero-actions .top-icon-menu summary,
html[lang="th"] .hero-actions .btn,
html[lang="th"] .hero-actions .hero-link-btn,
html[lang="th"] .hero-actions .top-icon-menu summary,
html[lang="ko"] .hero-actions .btn,
html[lang="ko"] .hero-actions .hero-link-btn,
html[lang="ko"] .hero-actions .top-icon-menu summary{
  font-size:14px !important;
  line-height:1.24 !important;
}

@media (min-width: 1500px){
  .hero{
    grid-template-columns:minmax(0, 1fr) minmax(470px, 640px) !important;
  }
  .header-illustration,
  .brand-logo{
    max-width:640px !important;
  }
}

@media (max-width: 1200px){
  .hero{
    grid-template-columns:minmax(0, 1fr) minmax(360px, 470px) !important;
  }
  .brand-logo{
    grid-template-columns:72px minmax(0,1fr) !important;
  }
  .brand-title{
    font-size:clamp(16px, 1.7vw, 20px) !important;
  }
}


/* v38: stabilize long-language hero copy on wide screens */
.hero{
  grid-template-columns:minmax(0, 1fr) minmax(520px, 700px) !important;
}
.header-illustration,
.brand-logo{
  max-width:700px !important;
}
.brand-logo{
  grid-template-columns:78px minmax(0,1fr) !important;
  column-gap:16px !important;
}
.brand-title span{
  max-inline-size:42ch !important;
}
.brand-sub{
  max-width:min(100%, 390px) !important;
}
html[lang="es"] .brand-title,
html[lang="pt"] .brand-title,
html[lang="id"] .brand-title,
html[lang="th"] .brand-title{
  font-size:clamp(15px, 1.32vw, 18px) !important;
  line-height:1.26 !important;
}
html[lang="es"] .brand-sub,
html[lang="pt"] .brand-sub,
html[lang="id"] .brand-sub,
html[lang="th"] .brand-sub{
  max-width:min(100%, 360px) !important;
}
@media (min-width: 1500px){
  .hero{
    grid-template-columns:minmax(0, 1fr) minmax(560px, 760px) !important;
  }
  .header-illustration,
  .brand-logo{
    max-width:760px !important;
  }
  .brand-title span{
    max-inline-size:48ch !important;
  }
}
@media (max-width: 1400px){
  .hero{
    grid-template-columns:minmax(0, 1fr) minmax(430px, 560px) !important;
  }
  .header-illustration,
  .brand-logo{
    max-width:560px !important;
  }
  .brand-title span{
    max-inline-size:34ch !important;
  }
}


/* v39: add safer right margin for CJK/Korean/Hindi hero copy */
.header-illustration{
  padding-right:22px !important;
  box-sizing:border-box !important;
}
.brand-logo{
  padding-right:22px !important;
  box-sizing:border-box !important;
}
.brand-copy{
  max-width:calc(100% - 8px) !important;
}
.brand-title{
  max-width:100% !important;
  overflow-wrap:anywhere !important;
}
.brand-title span{
  max-inline-size:min(100%, 30ch) !important;
}
.brand-sub{
  max-width:min(100%, 350px) !important;
}

html[lang="ko"] .brand-title,
html[lang="zh"] .brand-title,
html[lang="ja"] .brand-title,
html[lang="hi"] .brand-title{
  font-size:clamp(14px, 1.12vw, 16px) !important;
  line-height:1.34 !important;
}
html[lang="ko"] .brand-sub,
html[lang="zh"] .brand-sub,
html[lang="ja"] .brand-sub,
html[lang="hi"] .brand-sub{
  font-size:12.5px !important;
  max-width:min(100%, 315px) !important;
}

@media (min-width: 1401px){
  .hero{
    grid-template-columns:minmax(0, 1fr) minmax(500px, 660px) !important;
  }
  .header-illustration,
  .brand-logo{
    max-width:660px !important;
  }
}

@media (max-width: 1400px){
  .header-illustration,
  .brand-logo{
    max-width:540px !important;
  }
}

@media (max-width: 980px){
  .header-illustration,
  .brand-logo{
    padding-right:0 !important;
  }
  .brand-title span{
    max-inline-size:100% !important;
  }
}

/* v40: conservative responsive tuning from v38
   Goal: keep the same visual direction while improving fit on laptop/tablet/mobile. */

/* General safeguards for long translated labels */
.hero-link-btn,
.top-icon-menu summary,
.top-dropdown-list .dropdown-item,
.brand-title,
.brand-sub,
.section-head h2,
.section-head h4,
.section-head h5,
.note .title,
.note .body,
.empty-state,
.onboarding-note,
.modal-head h3,
.field-label,
.btn,
.pager-btn{
  overflow-wrap:anywhere;
}

.hero{
  align-items:start;
}

.hero > .hero-actions{
  flex-wrap:wrap !important;
  align-items:stretch !important;
}

.header-illustration,
.brand-logo,
.brand-copy,
.brand-title,
.brand-sub{
  min-width:0;
}

.brand-copy{
  width:100%;
}

.brand-title{
  max-width:100%;
}

.brand-title span{
  max-width:100%;
}

.brand-sub{
  flex-wrap:wrap;
  row-gap:8px;
}

#coffeeCta{
  width:fit-content;
  max-width:100%;
}

.language-dropdown-list,
.collections-dropdown-list,
.top-dropdown-list{
  max-width:min(92vw, 340px);
  overflow:auto;
  overscroll-behavior:contain;
}

@media (min-width: 981px) and (max-width: 1280px){
  .hero{
    grid-template-columns:minmax(0, 1fr) minmax(300px, 350px) !important;
    column-gap:30px !important;
  }

  .heading{
    max-width:760px !important;
  }

  .heading h1{
    max-width:760px !important;
    font-size:clamp(38px, 4vw, 54px) !important;
  }

  .header-illustration{
    max-width:350px !important;
  }

  .brand-logo{
    max-width:350px !important;
  }

  .brand-copy{
    max-width:320px !important;
  }

  .brand-title{
    font-size:21px !important;
    line-height:1.16 !important;
  }

  .brand-sub{
    font-size:13px !important;
    line-height:1.3 !important;
  }

  .hero > .hero-actions{
    gap:12px !important;
  }

  .hero-actions .btn,
  .hero-actions .hero-link-btn,
  .hero-actions .top-icon-menu summary{
    font-size:12.5px !important;
    line-height:1.2 !important;
    padding:10px 11px !important;
  }
}

@media (min-width: 761px) and (max-width: 980px){
  .page{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .hero{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .header-illustration{
    justify-content:flex-start !important;
    max-width:100% !important;
  }

  .brand-logo{
    max-width:min(100%, 560px) !important;
  }

  .brand-copy{
    max-width:420px !important;
  }

  .brand-title{
    font-size:20px !important;
    line-height:1.18 !important;
  }

  .brand-title span{
    white-space:normal !important;
  }

  .hero > .hero-actions{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
    width:100% !important;
  }

  .hero-actions .btn.primary{
    grid-column:1 / -1 !important;
  }

  .hero-actions .top-icon-menu,
  .hero-actions .hero-link-btn,
  .hero-actions .btn{
    min-width:0 !important;
  }

  .hero-actions .btn,
  .hero-actions .hero-link-btn,
  .hero-actions .top-icon-menu summary{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:normal !important;
    line-height:1.25 !important;
    min-height:46px !important;
  }

  .top-icon-menu[open]{
    grid-column:1 / -1 !important;
  }

  .top-dropdown-list{
    width:100% !important;
    max-width:none !important;
  }

  .feature-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }

  .masonry.paged-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px){
  .page{
    padding-bottom:34px !important;
  }

  .heading{
    margin-bottom:2px !important;
  }

  .brand-logo{
    align-items:flex-start !important;
  }

  .brand-copy{
    max-width:100% !important;
  }

  .brand-sub{
    width:100% !important;
    justify-content:flex-start !important;
  }

  .top-dropdown-list{
    max-height:min(60vh, 420px) !important;
    -webkit-overflow-scrolling:touch;
  }

  .top-dropdown-list .dropdown-item{
    justify-content:flex-start !important;
    text-align:left !important;
  }

  .modal-card{
    scroll-padding-bottom:84px;
  }

  .modal-body{
    padding-bottom:calc(22px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 420px){
  .page{
    padding-left:8px !important;
    padding-right:8px !important;
  }

  .hero-kicker{
    font-size:12px !important;
  }

  .hero-actions .btn,
  .hero-actions .hero-link-btn,
  .hero-actions .top-icon-menu summary{
    font-size:12.5px !important;
  }

  .brand-title{
    font-size:13.5px !important;
    line-height:1.3 !important;
  }

  .brand-sub{
    font-size:12.5px !important;
  }
}

/* ===== v42: conservative responsive tuning from v41 ===== */
@media (min-width: 981px) and (max-width: 1280px){
  .page{
    padding-left:clamp(14px, 2vw, 24px) !important;
    padding-right:clamp(14px, 2vw, 24px) !important;
  }

  .hero{
    grid-template-columns:minmax(0, 1fr) minmax(300px, 360px) !important;
    column-gap:18px !important;
    row-gap:14px !important;
  }

  .heading h1{
    font-size:clamp(42px, 5.4vw, 64px) !important;
    line-height:.96 !important;
  }

  .hero-summary{
    max-width:54ch !important;
  }

  .header-illustration,
  .brand-logo,
  .brand-copy{
    min-width:0 !important;
    max-width:100% !important;
  }

  .brand-title{
    font-size:clamp(14px, 1.35vw, 16px) !important;
    line-height:1.26 !important;
  }

  .brand-sub{
    width:100% !important;
    max-width:30ch !important;
    white-space:normal !important;
    line-height:1.35 !important;
  }

  .coffee-support,
  .coffee-text{
    max-width:100% !important;
    white-space:normal !important;
    line-height:1.28 !important;
  }

  .hero > .hero-actions{
    gap:10px 12px !important;
    align-items:stretch !important;
  }

  .hero-actions .btn,
  .hero-actions .hero-link-btn,
  .hero-actions .top-icon-menu summary{
    min-height:46px !important;
    white-space:normal !important;
    line-height:1.2 !important;
  }

  .hero-actions .hero-link-btn{
    padding-left:10px !important;
    padding-right:10px !important;
  }
}

@media (min-width: 761px) and (max-width: 980px){
  .page{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .hero{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .heading,
  .header-illustration,
  .brand-logo,
  .brand-copy{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .heading h1{
    font-size:clamp(38px, 7vw, 56px) !important;
    line-height:.98 !important;
  }

  .hero-summary,
  .brand-sub,
  .coffee-support,
  .coffee-text{
    max-width:100% !important;
    white-space:normal !important;
    line-height:1.34 !important;
  }

  .hero > .hero-actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    padding-top:14px !important;
  }

  .hero-actions .btn.primary{
    flex:1 1 100% !important;
  }

  .hero-actions .btn,
  .hero-actions .hero-link-btn,
  .hero-actions .top-icon-menu,
  .hero-actions .top-icon-menu summary{
    flex:1 1 calc(50% - 10px) !important;
    min-width:180px !important;
    min-height:46px !important;
    white-space:normal !important;
  }

  .top-dropdown-list{
    max-width:min(100%, 420px) !important;
  }

  .modal-card{
    width:min(92vw, 760px) !important;
    max-height:88vh !important;
  }
}

@media (max-width: 760px){
  .hero-summary,
  .coffee-support,
  .coffee-text,
  .brand-sub,
  .brand-title span{
    overflow-wrap:anywhere !important;
  }

  .board-wrap{
    border-radius:26px !important;
  }

  .feature-grid,
  .masonry{
    grid-template-columns:1fr !important;
  }

  .note,
  .mini-note,
  .wide-note,
  .tall-note{
    width:100% !important;
    max-width:100% !important;
  }

  .modal-card{
    box-shadow:0 -8px 28px rgba(0,0,0,.24) !important;
  }
}


/* v42 hotfix: keep the hero slogan to exactly two lines on desktop */
@media (min-width: 981px){
  .header-illustration,
  .brand-logo{
    max-width:620px !important;
  }

  .brand-copy{
    max-width:390px !important;
  }

  .brand-title{
    font-size:18px !important;
    line-height:1.14 !important;
  }

  .brand-title span{
    white-space:nowrap !important;
    overflow-wrap:normal !important;
    word-break:keep-all !important;
    max-inline-size:none !important;
  }
}


/* v42 spacing fix: add more gap between compose labels and input fields across all languages */
#composeModal .composer-grid .field-label{
  display:block;
  margin:0 0 14px;
  line-height:1.4;
}
#composeModal .composer-field-full > .field-label{
  margin-bottom:14px;
}
@media (max-width:640px){
  #composeModal .composer-grid .field-label{
    margin-bottom:15px;
  }
}


/* v44: keep compose box fixed-height with scroll instead of resizable frame */
#composeModal .composer-textarea{
  resize:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

/* v46: keep main board title on a single line, using English as the master layout rule */
.heading{
  max-width:none !important;
}

.heading h1{
  white-space:nowrap !important;
  max-width:none !important;
  width:auto !important;
  letter-spacing:-0.035em !important;
  font-size:clamp(34px, 4.6vw, 60px) !important;
}

@media (max-width: 980px){
  .heading h1{
    font-size:clamp(28px, 5.8vw, 46px) !important;
  }
}

@media (max-width: 640px){
  .heading h1{
    font-size:clamp(24px, 6vw, 34px) !important;
    letter-spacing:-0.03em !important;
  }
}


.local-settings-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.note.is-moderated-hidden{display:none!important}
.note-status-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800;background:rgba(255,255,255,.84);color:#5f4130;margin-left:8px}
.note-status-chip.pending{background:#f7ebc3}
.note-status-chip.hidden{background:#f4c9c1}


/* v11 desktop hero action ordering and fit fix */
@media (min-width: 1200px){
  .hero > .hero-actions{
    justify-content:flex-start !important;
    gap:8px !important;
  }
  .hero-actions #openComposeBtn{order:1;}
  .hero-actions .language-menu{order:2;}
  .hero-actions .collections-menu{order:3;}
  .hero-actions [data-i18n="view_highlights"]{order:4;}
  .hero-actions [data-i18n="view_latest_notes"]{order:5;}
  .hero-actions [data-i18n="view_unanswered_notes"]{order:6;}
  .hero-actions [data-i18n="view_answered_notes"]{order:7;}
  .hero-actions .top-icon-menu summary,
  .hero-actions .hero-link-btn{
    font-size:12px !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
}


/* v12: move answered/unanswered shortcuts beside Latest notes title and remove redundant hero shortcuts */
.hero-actions > .hero-link-btn[data-i18n="view_unanswered_notes"],
.hero-actions > .hero-link-btn[data-i18n="view_answered_notes"]{
  display:none !important;
}

.latest-section-head{
  align-items:flex-end;
}

.latest-head-row{
  display:flex;
  align-items:flex-end;
  gap:18px;
  flex-wrap:wrap;
  min-width:0;
}

.latest-inline-links{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.latest-inline-link{
  min-height:42px;
  padding:8px 14px;
  font-size:13px;
  white-space:nowrap;
}

@media (max-width: 980px){
  .latest-section-head{
    align-items:flex-start;
  }
  .latest-head-row{
    width:100%;
    align-items:flex-start;
    gap:12px;
  }
  .latest-inline-links{
    width:100%;
    gap:10px;
  }
}


/* v15: balance top navigation and latest-inline shortcuts with regular weight across all languages */
.latest-inline-links{
  gap:16px;
}

.latest-inline-link,
.hero-actions .top-icon-menu summary,
.hero-actions .top-icon-menu .language-menu-label,
.hero-actions .top-icon-menu .collections-menu-label{
  font-size:clamp(14px, 0.95vw, 17px) !important;
  font-weight:400 !important;
  line-height:1.2 !important;
}

.latest-inline-link{
  color:var(--chalk) !important;
  padding:2px 0 7px !important;
  min-height:auto !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  text-decoration:underline;
  text-decoration-thickness:3px;
  text-underline-offset:7px;
  text-decoration-color:rgba(255,143,200,.65);
  text-shadow:none !important;
}

.latest-inline-link:hover{
  transform:none !important;
  box-shadow:none !important;
  text-decoration-color:rgba(255,196,87,.9);
}

@media (max-width: 980px){
  .latest-inline-link,
  .hero-actions .top-icon-menu summary,
  .hero-actions .top-icon-menu .language-menu-label,
  .hero-actions .top-icon-menu .collections-menu-label{
    font-size:clamp(14px, 3.5vw, 16px) !important;
  }

  .latest-inline-link{
    text-underline-offset:5px;
  }
}


/* v16: center coffee CTA on mobile */
@media (max-width: 760px){
  #coffeeCta,
  .brand-sub{
    align-self:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .brand-logo{
    align-items:center !important;
  }

  .brand-copy{
    text-align:center !important;
    align-items:center !important;
  }
}

/* v17: truly center coffee CTA on mobile */
@media (max-width: 760px){
  .header-illustration{
    display:flex !important;
    justify-content:center !important;
  }
  .brand-logo{
    width:100% !important;
    max-width:350px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    gap:14px !important;
  }
  .brand-copy{
    width:100% !important;
    max-width:320px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
  }
  #coffeeCta,
  .brand-sub{
    width:max-content !important;
    max-width:100% !important;
    align-self:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* v19: mobile brand copy forced into two centered lines */
@media (max-width: 760px){
  .brand-copy{
    max-width:360px !important;
  }
  .brand-kicker{
    white-space:nowrap !important;
  }
  .brand-title{
    width:auto !important;
    max-width:100% !important;
    font-size:clamp(13px, 3.5vw, 16px) !important;
    line-height:1.28 !important;
  }
  .brand-title span{
    display:block !important;
    white-space:nowrap !important;
  }
}


/* v20: mobile brand copy forced into exactly two rows */
@media (max-width: 760px){
  .brand-copy{
    max-width: 100% !important;
    width: 100% !important;
  }
  .brand-kicker{
    display:block !important;
    width:100% !important;
    white-space:nowrap !important;
    text-align:center !important;
  }
  .brand-title{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    text-align:center !important;
    font-size: clamp(11px, 3.9vw, 15px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }
  .brand-title span{
    display:inline !important;
    white-space:nowrap !important;
  }
}


/* v21 mobile brand copy: force exactly two rows */
@media (max-width: 768px){
  .brand-copy{
    width:100% !important;
    max-width:100% !important;
    align-items:center !important;
    text-align:center !important;
  }
  .brand-kicker{
    display:block !important;
    width:100% !important;
    font-size:16px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    letter-spacing:0 !important;
  }
  .brand-title{
    display:block !important;
    width:100% !important;
    font-size:14px !important;
    line-height:1.25 !important;
    white-space:nowrap !important;
    letter-spacing:0 !important;
    margin-top:2px !important;
  }
  .brand-title span{
    display:block !important;
    white-space:nowrap !important;
  }
}
@media (max-width: 420px){
  .brand-kicker{font-size:14px !important;}
  .brand-title{font-size:12.5px !important;}
}


html[dir="rtl"],
body.is-rtl{
  direction:rtl;
}
html[dir="rtl"] body,
body.is-rtl{
  text-align:right;
  font-family:"Tahoma","Arial","Segoe UI",system-ui,sans-serif;
}
html[dir="rtl"] .skip-link{left:auto;right:14px;}
html[dir="rtl"] .heading h1::after{left:18px;right:18px;}
html[dir="rtl"] .header-illustration,
html[dir="rtl"] .toolbar-right,
html[dir="rtl"] .hero-actions .top-icon-menu summary,
html[dir="rtl"] .hero-actions .language-menu summary,
html[dir="rtl"] .hero-actions .language-option,
html[dir="rtl"] .top-icon-menu summary,
html[dir="rtl"] .dropdown-item,
html[dir="rtl"] .hero-link-btn,
html[dir="rtl"] .resource-card,
html[dir="rtl"] .footer-card,
html[dir="rtl"] .empty-state,
html[dir="rtl"] .modal-card,
html[dir="rtl"] .note,
html[dir="rtl"] .note p,
html[dir="rtl"] .note-content,
html[dir="rtl"] .note-support-preview,
html[dir="rtl"] .field-label,
html[dir="rtl"] .field-helper,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] .composer-helper,
html[dir="rtl"] .empty-copy,
html[dir="rtl"] .section-head,
html[dir="rtl"] .board-footer,
html[dir="rtl"] .note-meta,
html[dir="rtl"] .confirm-copy,
html[dir="rtl"] .report-copy{
  text-align:right !important;
}
html[dir="rtl"] .brand-logo,
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .note-top,
html[dir="rtl"] .note-support-actions,
html[dir="rtl"] .post-text-actions,
html[dir="rtl"] .modal-actions,
html[dir="rtl"] .confirm-actions,
html[dir="rtl"] .toolbar-right{
  flex-direction:row-reverse;
}
html[dir="rtl"] .note-top{padding-left:0;padding-right:10px;}
html[dir="rtl"] .brand-note{left:auto;right:19px;transform:rotate(8deg);}
html[dir="rtl"] .brand-heart{right:auto;left:8px;}
html[dir="rtl"] .brand-sub-icon{margin-left:0;margin-right:6px;}
html[dir="rtl"] .coffee-cup::before{right:auto;left:-7px;border-left:2px solid #6c4f3a;border-right:none;border-radius:9px 0 0 9px;}
html[dir="rtl"] .coffee-cup::after{left:auto;right:3px;}
html[dir="rtl"] .note::before,
html[dir="rtl"] .empty-state::before,
html[dir="rtl"] .onboarding-note::before{left:auto;right:12px;}
html[dir="rtl"] .paper-fold{right:auto;left:0;transform:scaleX(-1);}
html[dir="rtl"] .visit-count,
html[dir="rtl"] .note-status-chip{margin-left:0;margin-right:8px;}
html[dir="rtl"] .draft-status{margin-right:0;margin-left:auto;}
html[dir="rtl"] .char-counter{margin-left:0;margin-right:auto;}
html[dir="rtl"] .note-support-actions{margin-left:0;margin-right:6px;}
html[dir="rtl"] .note-support-preview.is-scrollable{padding-right:0;padding-left:8px;}
html[dir="rtl"] .resource-card ul,
html[dir="rtl"] .footer-card ul{padding-left:0;padding-right:18px;}
html[dir="rtl"] .floating-top{right:auto;left:18px;}
@media (max-width:760px){
  html[dir="rtl"] .floating-top{left:14px;right:auto;}
}


/* Arabic polish pass: use Arabic-friendly fonts, remove forced uppercase, and mirror key affordances. */
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea{
  font-family:var(--font-ui-ar) !important;
}

html[lang="ar"] .heading h1,
html[lang="ar"] .section-head h2,
html[lang="ar"] .section-head h4,
html[lang="ar"] .brand-title,
html[lang="ar"] .brand-kicker,
html[lang="ar"] .board-footer,
html[lang="ar"] .footer-card h5{
  font-family:var(--font-display-ar) !important;
  letter-spacing:normal !important;
  text-transform:none !important;
}

html[lang="ar"] .hero-kicker,
html[lang="ar"] .hero-summary,
html[lang="ar"] .support-pill,
html[lang="ar"] .btn,
html[lang="ar"] .dropdown-item,
html[lang="ar"] .hero-link-btn,
html[lang="ar"] .reply-btn,
html[lang="ar"] .tiny-btn,
html[lang="ar"] .pager-btn,
html[lang="ar"] .field-label,
html[lang="ar"] .field-helper,
html[lang="ar"] .note .name,
html[lang="ar"] .note .title,
html[lang="ar"] .note .body,
html[lang="ar"] .note .meta,
html[lang="ar"] .note .badge,
html[lang="ar"] .note .reply-label,
html[lang="ar"] .note .note-support-item,
html[lang="ar"] .note .note-support-item .only-text,
html[lang="ar"] .modal-card,
html[lang="ar"] .modal-copy,
html[lang="ar"] .modal-kicker,
html[lang="ar"] .confirm-copy,
html[lang="ar"] .report-copy{
  letter-spacing:normal !important;
  text-transform:none !important;
}

html[lang="ar"] .heading h1,
html[lang="ar"] .note .title,
html[lang="ar"] .title,
html[lang="ar"] .modal-card h3{
  line-height:1.35 !important;
}

html[lang="ar"] .hero-summary,
html[lang="ar"] .body,
html[lang="ar"] .note .body,
html[lang="ar"] textarea{
  line-height:1.9 !important;
}

html[dir="rtl"] .top-icon-menu .top-dropdown-list{
  left:auto;
  right:0;
}

html[dir="rtl"] .reply-btn .reply-icon,
html[dir="rtl"] .coffee-arrow{
  transform:scaleX(-1);
}

html[dir="rtl"] .latest-inline-links,
html[dir="rtl"] .action-row,
html[dir="rtl"] .latest-head-row{
  justify-content:flex-start;
}

html[dir="rtl"] .hero-actions > .btn.primary,
html[dir="rtl"] .hero-actions > .top-icon-menu,
html[dir="rtl"] .hero-actions > .hero-link-btn{
  order:initial;
}


/* Arabic QA pass: tighten RTL mirroring for mixed content and component chrome. */
html[dir="rtl"] .identity,
html[dir="rtl"] .helper-row,
html[dir="rtl"] .coffee-chip-row,
html[dir="rtl"] .sticker-row,
html[dir="rtl"] .modal-head,
html[dir="rtl"] .confirm-head,
html[dir="rtl"] .latest-filter-bar,
html[dir="rtl"] .latest-filter-chip,
html[dir="rtl"] .read-modal-meta,
html[dir="rtl"] .brand-sub,
html[dir="rtl"] .qr-caption,
html[dir="rtl"] .toolbar,
html[dir="rtl"] .section-pager{
  direction:rtl;
}

html[dir="rtl"] .identity,
html[dir="rtl"] .helper-row,
html[dir="rtl"] .coffee-chip-row,
html[dir="rtl"] .sticker-row,
html[dir="rtl"] .modal-head,
html[dir="rtl"] .confirm-head,
html[dir="rtl"] .latest-filter-bar,
html[dir="rtl"] .section-pager{
  flex-direction:row-reverse;
}

html[dir="rtl"] .identity .avatar,
html[dir="rtl"] .modal-head .icon-close,
html[dir="rtl"] .confirm-head .icon-close{
  order:-1;
}

html[dir="rtl"] .name,
html[dir="rtl"] .badge,
html[dir="rtl"] .reply-label,
html[dir="rtl"] .read-modal-meta,
html[dir="rtl"] .latest-filter-chip,
html[dir="rtl"] .top-icon-badge{
  letter-spacing:normal !important;
  text-transform:none !important;
}

html[dir="rtl"] .language-option,
html[dir="rtl"] .dropdown-item,
html[dir="rtl"] .top-dropdown-list,
html[dir="rtl"] .language-dropdown-list,
html[dir="rtl"] .collections-dropdown-list,
html[dir="rtl"] .support-textarea,
html[dir="rtl"] .composer-textarea,
html[dir="rtl"] .opened-note-text,
html[dir="rtl"] .opened-note-title,
html[dir="rtl"] .coffee-modal-copy,
html[dir="rtl"] .read-modal-copy{
  direction:rtl;
  unicode-bidi:plaintext;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] .composer-input,
html[dir="rtl"] .composer-select,
html[dir="rtl"] .composer-textarea,
html[dir="rtl"] .support-textarea{
  text-align:right;
}

html[dir="rtl"] .language-flag,
html[dir="rtl"] .language-current-flag,
html[dir="rtl"] .top-icon-badge{
  flex:0 0 auto;
}

html[dir="rtl"] .language-option,
html[dir="rtl"] .dropdown-item{
  justify-content:flex-start;
}

html[dir="rtl"] .latest-inline-link,
html[dir="rtl"] .hero-link-btn,
html[dir="rtl"] .reply-btn,
html[dir="rtl"] .btn,
html[dir="rtl"] .tiny-btn{
  direction:rtl;
}

html[dir="rtl"] .section-head,
html[dir="rtl"] .latest-section-head,
html[dir="rtl"] .heading,
html[dir="rtl"] .confirm-body,
html[dir="rtl"] .modal-body,
html[dir="rtl"] .composer-field-full{
  direction:rtl;
}

html[dir="rtl"] .note .body,
html[dir="rtl"] .opened-note-text,
html[dir="rtl"] .read-modal-copy,
html[dir="rtl"] .coffee-modal-copy,
html[dir="rtl"] .support-helper,
html[dir="rtl"] .composer-helper{
  unicode-bidi:plaintext;
}

html[lang="ar"] .brand-kicker,
html[lang="ar"] .brand-title,
html[lang="ar"] .name,
html[lang="ar"] .badge,
html[lang="ar"] .reply-label,
html[lang="ar"] .read-modal-meta,
html[lang="ar"] .latest-filter-chip,
html[lang="ar"] .top-icon-badge{
  font-family:var(--font-display-ar) !important;
}

html[lang="ar"] .hero-kicker,
html[lang="ar"] .hero-summary,
html[lang="ar"] .section-intro,
html[lang="ar"] .empty-copy,
html[lang="ar"] .support-helper,
html[lang="ar"] .composer-helper,
html[lang="ar"] .modal-copy,
html[lang="ar"] .read-modal-copy,
html[lang="ar"] .coffee-modal-copy,
html[lang="ar"] .confirm-copy{
  font-family:var(--font-ui-ar) !important;
}

@media (max-width:760px){
  html[dir="rtl"] .modal-actions,
  html[dir="rtl"] .confirm-actions,
  html[dir="rtl"] .hero-actions{
    flex-direction:column;
  }
}


/* Arabic polish pass based on live screenshot review. */
html[lang="ar"] .heading h1{
  font-size:clamp(24px,2.1vw,31px) !important;
  line-height:1.28 !important;
  padding:12px 16px 11px !important;
  max-width:18ch;
}
html[lang="ar"] .hero-kicker,
html[lang="ar"] .brand-kicker,
html[lang="ar"] .brand-sub,
html[lang="ar"] .hero-actions .language-menu summary,
html[lang="ar"] .hero-actions .collections-menu summary,
html[lang="ar"] .hero-link-btn,
html[lang="ar"] .btn.primary{
  text-transform:none !important;
  letter-spacing:normal !important;
}
html[lang="ar"] .hero-kicker{font-size:11px;}
html[lang="ar"] .brand-logo{align-items:flex-start;}
html[lang="ar"] .brand-copy{max-width:100%;}
html[lang="ar"] .brand-sub{font-size:12px; line-height:1.4;}
html[lang="ar"] .section-head h2,
html[lang="ar"] .section-head h4{line-height:1.3 !important;}
html[dir="rtl"] .note .title,
html[dir="rtl"] .note .body,
html[dir="rtl"] .note .meta,
html[dir="rtl"] .note .name,
html[dir="rtl"] .reply-label,
html[dir="rtl"] .opened-note-title,
html[dir="rtl"] .opened-note-text,
html[dir="rtl"] .read-modal-meta{
  text-align:start;
  unicode-bidi:plaintext;
}
html[dir="rtl"] .hero > .hero-actions{
  gap:8px;
}
html[lang="ar"] .hero > .hero-actions .hero-link-btn,
html[lang="ar"] .hero > .hero-actions .btn.primary,
html[lang="ar"] .hero > .hero-actions .top-icon-menu summary{
  font-size:12px;
}
@media (max-width:1100px){
  html[lang="ar"] .heading h1{max-width:100%;}
}
@media (max-width:760px){
  html[lang="ar"] .heading h1{font-size:clamp(22px,7vw,28px) !important;}
  html[lang="ar"] .header-illustration{justify-self:stretch;}
}

/* v65: keep Arabic hero composition aligned to the English master layout */
html[lang="ar"] .hero{
  direction:ltr !important;
}

html[lang="ar"] .hero > .heading{
  grid-column:1 !important;
  justify-self:start !important;
  text-align:left !important;
  direction:ltr !important;
}

html[lang="ar"] .hero > .header-illustration{
  grid-column:2 !important;
  justify-self:end !important;
  text-align:left !important;
  direction:ltr !important;
}

html[lang="ar"] .hero > .hero-actions{
  grid-column:1 / -1 !important;
  justify-content:flex-start !important;
  flex-direction:row !important;
  direction:ltr !important;
}

html[lang="ar"] .hero .brand-logo,
html[lang="ar"] .hero .brand-copy,
html[lang="ar"] .hero .brand-sub,
html[lang="ar"] .hero .latest-head-row,
html[lang="ar"] .hero .latest-inline-links{
  direction:ltr !important;
}

html[lang="ar"] .hero .hero-kicker,
html[lang="ar"] .hero .heading h1,
html[lang="ar"] .hero .brand-kicker,
html[lang="ar"] .hero .brand-title,
html[lang="ar"] .hero .brand-sub,
html[lang="ar"] .hero .coffee-text,
html[lang="ar"] .hero .coffee-arrow,
html[lang="ar"] .hero .hero-actions .btn,
html[lang="ar"] .hero .hero-actions .hero-link-btn,
html[lang="ar"] .hero .hero-actions .top-icon-menu summary{
  text-align:left !important;
}

html[lang="ar"] .hero .brand-logo{
  grid-template-columns:84px minmax(0,1fr) !important;
  align-items:center !important;
}

html[lang="ar"] .hero .brand-copy{
  align-items:flex-start !important;
}

html[lang="ar"] .hero .brand-sub{
  justify-content:flex-start !important;
}

html[lang="ar"] .hero .coffee-arrow,
html[lang="ar"] .hero .reply-btn .reply-icon{
  transform:none !important;
}

html[lang="ar"] .hero .top-icon-menu .top-dropdown-list{
  left:0 !important;
  right:auto !important;
}

html[lang="ar"] .hero .language-option,
html[lang="ar"] .hero .dropdown-item{
  direction:rtl !important;
  text-align:right !important;
}

@media (max-width: 980px){
  html[lang="ar"] .hero{
    direction:rtl !important;
  }

  html[lang="ar"] .hero > .heading,
  html[lang="ar"] .hero > .header-illustration,
  html[lang="ar"] .hero > .hero-actions{
    grid-column:auto !important;
    justify-self:stretch !important;
  }

  html[lang="ar"] .hero > .heading,
  html[lang="ar"] .hero > .header-illustration,
  html[lang="ar"] .hero > .hero-actions,
  html[lang="ar"] .hero .brand-logo,
  html[lang="ar"] .hero .brand-copy,
  html[lang="ar"] .hero .brand-sub{
    direction:rtl !important;
  }

  html[lang="ar"] .hero .hero-kicker,
  html[lang="ar"] .hero .heading h1,
  html[lang="ar"] .hero .brand-kicker,
  html[lang="ar"] .hero .brand-title,
  html[lang="ar"] .hero .brand-sub,
  html[lang="ar"] .hero .coffee-text,
  html[lang="ar"] .hero .hero-actions .btn,
  html[lang="ar"] .hero .hero-actions .hero-link-btn,
  html[lang="ar"] .hero .hero-actions .top-icon-menu summary{
    text-align:right !important;
  }

  html[lang="ar"] .hero .top-icon-menu .top-dropdown-list{
    left:auto !important;
    right:0 !important;
  }
}

/* v66: Arabic hero desktop composition should match the user's approved mockup */
@media (min-width: 981px){
  html[lang="ar"] .hero{
    direction:rtl !important;
    grid-template-columns:minmax(360px, 420px) minmax(0, 1fr) !important;
    align-items:start !important;
  }

  html[lang="ar"] .hero > .header-illustration{
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:start !important;
    align-self:start !important;
    width:100% !important;
    text-align:left !important;
    direction:rtl !important;
  }

  html[lang="ar"] .hero > .heading{
    grid-column:2 !important;
    grid-row:1 !important;
    justify-self:stretch !important;
    align-self:start !important;
    text-align:right !important;
    direction:rtl !important;
  }

  html[lang="ar"] .hero > .hero-actions{
    grid-column:2 !important;
    grid-row:2 !important;
    width:100% !important;
    justify-self:stretch !important;
    justify-content:flex-start !important;
    flex-direction:row !important;
    direction:rtl !important;
    margin-top:4px !important;
    padding-top:6px !important;
  }

  html[lang="ar"] .hero .heading h1,
  html[lang="ar"] .hero .hero-kicker{
    text-align:right !important;
  }

  html[lang="ar"] .hero .brand-logo{
    direction:rtl !important;
    grid-template-columns:minmax(0,1fr) 92px !important;
    align-items:start !important;
    justify-items:start !important;
    text-align:left !important;
    padding-right:0 !important;
    padding-left:0 !important;
  }

  html[lang="ar"] .hero .brand-copy{
    direction:rtl !important;
    align-items:flex-start !important;
    text-align:left !important;
    order:1 !important;
  }

  html[lang="ar"] .hero .brand-mark,
  html[lang="ar"] .hero .brand-ring,
  html[lang="ar"] .hero .brand-note,
  html[lang="ar"] .hero .brand-heart{
    order:2 !important;
  }

  html[lang="ar"] .hero .brand-sub{
    direction:rtl !important;
    align-self:flex-start !important;
    justify-content:flex-start !important;
    text-align:center !important;
  }

  html[lang="ar"] .hero .coffee-arrow{
    transform:none !important;
  }

  html[lang="ar"] .hero .top-icon-menu .top-dropdown-list{
    right:0 !important;
    left:auto !important;
  }

  html[lang="ar"] .hero .hero-actions .btn.primary,
  html[lang="ar"] .hero .hero-actions .top-icon-menu,
  html[lang="ar"] .hero .hero-actions .hero-link-btn{
    flex:0 0 auto !important;
  }
}

@media (max-width: 980px){
  html[lang="ar"] .hero,
  html[lang="ar"] .hero > .heading,
  html[lang="ar"] .hero > .header-illustration,
  html[lang="ar"] .hero > .hero-actions{
    direction:rtl !important;
  }
}


/* v65: lock Arabic hero desktop layout to match English composition */
@media (min-width: 981px){
  html[lang="ar"] body .page > .hero,
  html[lang="ar"] .page .hero{
    direction:ltr !important;
    display:grid !important;
    grid-template-columns: minmax(360px, 430px) minmax(0, 1fr) !important;
    grid-template-areas:
      "brand heading"
      "brand actions" !important;
    align-items:start !important;
    column-gap: 40px !important;
    row-gap: 24px !important;
  }
  html[lang="ar"] .page .hero > .header-illustration{
    grid-area: brand !important;
    align-self:start !important;
    justify-self:start !important;
    width:100% !important;
    max-width:430px !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
  html[lang="ar"] .page .hero > .heading{
    grid-area: heading !important;
    align-self:start !important;
    justify-self:stretch !important;
    width:100% !important;
    text-align:right !important;
    direction:rtl !important;
    margin:0 !important;
    padding-top: 18px !important;
  }
  html[lang="ar"] .page .hero > .hero-actions{
    grid-area: actions !important;
    align-self:start !important;
    justify-self:stretch !important;
    width:100% !important;
    margin:0 !important;
    padding-top:0 !important;
    border-top:0 !important;
    direction:ltr !important;
    justify-content:flex-end !important;
    row-gap:14px !important;
    column-gap:14px !important;
  }
  html[lang="ar"] .page .hero > .hero-actions #openComposeBtn{ order:3 !important; }
  html[lang="ar"] .page .hero > .hero-actions .language-menu{ order:1 !important; }
  html[lang="ar"] .page .hero > .hero-actions .collections-menu{ order:2 !important; }
  html[lang="ar"] .page .hero > .hero-actions [data-scroll-target="sensitive-section"]{ order:4 !important; }
  html[lang="ar"] .page .hero > .hero-actions [data-latest-answered="true"]{ order:5 !important; }

  html[lang="ar"] .page .hero .heading h1,
  html[lang="ar"] .page .hero .heading .hero-kicker{
    text-align:right !important;
    margin-inline-left:auto !important;
    margin-inline-right:0 !important;
  }
  html[lang="ar"] .page .hero .heading h1{
    max-width:none !important;
  }
  html[lang="ar"] .page .hero .brand-logo{
    justify-content:flex-start !important;
    text-align:right !important;
    direction:rtl !important;
    width:100% !important;
    max-width:430px !important;
    margin:0 !important;
  }
  html[lang="ar"] .page .hero .brand-copy{
    align-items:flex-start !important;
    text-align:right !important;
  }
  html[lang="ar"] .page .hero .brand-sub{
    align-self:flex-start !important;
    direction:rtl !important;
  }
}

/* v66: refine Arabic desktop logo block to match approved mockup */
@media (min-width: 981px){
  html[lang="ar"] .page .hero > .header-illustration{
    max-width:560px !important;
  }
  html[lang="ar"] .page .hero .brand-logo{
    display:grid !important;
    grid-template-columns:minmax(250px, 1fr) auto !important;
    grid-template-areas:"copy mark" !important;
    align-items:start !important;
    gap:18px 22px !important;
    max-width:560px !important;
    min-height:246px !important;
    padding:34px 36px 38px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
    border:1px solid rgba(247,241,223,.08) !important;
    box-shadow:none !important;
    border-radius:0 !important;
    direction:ltr !important;
  }
  html[lang="ar"] .page .hero .brand-mark{
    grid-area:mark !important;
    justify-self:end !important;
    align-self:start !important;
    width:108px !important;
    height:108px !important;
    flex-basis:108px !important;
    filter:drop-shadow(0 8px 12px rgba(0,0,0,.18)) !important;
  }
  html[lang="ar"] .page .hero .brand-note{
    width:52px !important;
    height:52px !important;
    left:24px !important;
    top:25px !important;
    border-radius:12px !important;
  }
  html[lang="ar"] .page .hero .brand-note::before{
    left:11px !important;
    right:11px !important;
    top:13px !important;
  }
  html[lang="ar"] .page .hero .brand-heart{
    right:4px !important;
    top:5px !important;
    width:33px !important;
    height:33px !important;
    font-size:14px !important;
  }
  html[lang="ar"] .page .hero .brand-copy{
    grid-area:copy !important;
    align-items:flex-end !important;
    justify-content:flex-start !important;
    text-align:right !important;
    direction:rtl !important;
    min-width:0 !important;
    padding-top:8px !important;
  }
  html[lang="ar"] .page .hero .brand-kicker,
  html[lang="ar"] .page .hero .brand-title{
    width:100% !important;
  }
  html[lang="ar"] .page .hero .brand-title{
    line-height:1.22 !important;
    margin-top:4px !important;
  }
  html[lang="ar"] .page .hero .brand-sub{
    align-self:flex-start !important;
    margin-top:18px !important;
    direction:rtl !important;
  }
}

/* v67: polish Arabic desktop hero logo scale and remove overlapping panels */
@media (min-width: 981px){
  html[lang="ar"] .page .hero > .heading,
  html[lang="ar"] .page .hero > .hero-actions,
  html[lang="ar"] .page .hero > .header-illustration{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  html[lang="ar"] .page .hero > .heading::before,
  html[lang="ar"] .page .hero > .heading::after,
  html[lang="ar"] .page .hero > .hero-actions::before,
  html[lang="ar"] .page .hero > .hero-actions::after,
  html[lang="ar"] .page .hero > .header-illustration::before,
  html[lang="ar"] .page .hero > .header-illustration::after{
    display:none !important;
    content:none !important;
  }

  html[lang="ar"] .page .hero .brand-logo{
    max-width: 520px !important;
    min-height: 220px !important;
    padding: 30px 34px 34px !important;
    gap: 16px 20px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)) !important;
  }

  html[lang="ar"] .page .hero .brand-mark{
    width: 94px !important;
    height: 94px !important;
    flex-basis: 94px !important;
    filter: drop-shadow(0 7px 10px rgba(0,0,0,.16)) !important;
  }

  html[lang="ar"] .page .hero .brand-note{
    width: 45px !important;
    height: 45px !important;
    left: 21px !important;
    top: 21px !important;
    border-radius: 11px !important;
  }

  html[lang="ar"] .page .hero .brand-note::before{
    left: 10px !important;
    right: 10px !important;
    top: 11px !important;
    height: 3px !important;
  }

  html[lang="ar"] .page .hero .brand-heart{
    width: 29px !important;
    height: 29px !important;
    right: 3px !important;
    top: 4px !important;
    font-size: 13px !important;
  }

  html[lang="ar"] .page .hero .brand-kicker{
    font-size: 14px !important;
    line-height: 1.15 !important;
  }

  html[lang="ar"] .page .hero .brand-title{
    font-size: 18px !important;
    line-height: 1.18 !important;
    margin-top: 2px !important;
  }

  html[lang="ar"] .page .hero .brand-sub{
    margin-top: 14px !important;
    font-size: 14px !important;
  }
}

/* v68: match Arabic hero logo/text scale to the English master exactly on desktop */
@media (min-width: 981px){
  html[lang="ar"] .page .hero .brand-logo{
    max-width:620px !important;
    min-height:auto !important;
    padding:12px 8px 10px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    gap:18px !important;
    align-items:center !important;
    grid-template-columns:minmax(0,1fr) 76px !important;
  }

  html[lang="ar"] .page .hero .brand-mark{
    width:76px !important;
    height:76px !important;
    flex-basis:76px !important;
    filter:drop-shadow(0 8px 12px rgba(0,0,0,.18)) !important;
  }

  html[lang="ar"] .page .hero .brand-note{
    width:38px !important;
    height:38px !important;
    left:17px !important;
    top:17px !important;
    border-radius:10px !important;
  }

  html[lang="ar"] .page .hero .brand-note::before{
    left:8px !important;
    right:8px !important;
    top:10px !important;
    height:3px !important;
  }

  html[lang="ar"] .page .hero .brand-heart{
    right:2px !important;
    top:3px !important;
    width:29px !important;
    height:29px !important;
    font-size:13px !important;
  }

  html[lang="ar"] .page .hero .brand-copy{
    padding-top:0 !important;
    gap:5px !important;
    max-width:390px !important;
    align-items:flex-end !important;
    text-align:right !important;
  }

  html[lang="ar"] .page .hero .brand-kicker{
    font-size:14px !important;
    line-height:1.2 !important;
    font-weight:900 !important;
    letter-spacing:0 !important;
  }

  html[lang="ar"] .page .hero .brand-title{
    font-size:18px !important;
    line-height:1.14 !important;
    font-weight:700 !important;
    letter-spacing:0 !important;
    margin-top:0 !important;
  }

  html[lang="ar"] .page .hero .brand-title span{
    white-space:nowrap !important;
  }

  html[lang="ar"] .page .hero .brand-sub{
    margin-top:12px !important;
    font-size:12.5px !important;
    line-height:1.2 !important;
    padding:9px 14px !important;
  }

  html[lang="ar"] .page .hero .heading h1{
    font-size:clamp(34px, 4.6vw, 60px) !important;
    line-height:1 !important;
    letter-spacing:-0.035em !important;
    max-width:none !important;
    white-space:nowrap !important;
  }
}


/* v69: align Arabic desktop logo block and hero title with English sizing */
@media (min-width: 981px){
  html[lang="ar"] .page .hero .brand-logo{
    max-width:700px !important;
    width:100% !important;
    grid-template-columns:minmax(0,1fr) 78px !important;
    column-gap:16px !important;
    row-gap:0 !important;
    align-items:start !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    direction:ltr !important;
  }

  html[lang="ar"] .page .hero .brand-copy{
    max-width:100% !important;
    gap:8px !important;
    padding-top:6px !important;
    align-items:flex-end !important;
    text-align:right !important;
    direction:rtl !important;
  }

  html[lang="ar"] .page .hero .brand-mark{
    width:82px !important;
    height:82px !important;
    flex-basis:82px !important;
    justify-self:end !important;
    align-self:start !important;
    filter:none !important;
  }

  html[lang="ar"] .page .hero .brand-note{
    width:42px !important;
    height:42px !important;
    left:19px !important;
    top:18px !important;
    border-radius:14px !important;
  }

  html[lang="ar"] .page .hero .brand-note::before{
    inset:8px 10px auto 10px !important;
    height:3px !important;
  }

  html[lang="ar"] .page .hero .brand-heart{
    right:8px !important;
    top:7px !important;
    width:27px !important;
    height:27px !important;
    font-size:12px !important;
  }

  html[lang="ar"] .page .hero .brand-kicker{
    font-size:13px !important;
    line-height:1.2 !important;
    letter-spacing:.04em !important;
    font-weight:900 !important;
    text-transform:none !important;
  }

  html[lang="ar"] .page .hero .brand-title{
    font-size:clamp(18px, 1.7vw, 22px) !important;
    line-height:1.2 !important;
    letter-spacing:0 !important;
    font-weight:900 !important;
    margin-top:0 !important;
  }

  html[lang="ar"] .page .hero .brand-title span{
    max-inline-size:42ch !important;
    white-space:normal !important;
  }

  html[lang="ar"] .page .hero .brand-sub{
    margin-top:8px !important;
    font-size:14px !important;
    max-width:min(100%, 390px) !important;
    padding:8px 10px 8px 14px !important;
    line-height:1.22 !important;
    align-self:flex-start !important;
    direction:rtl !important;
  }

  html[lang="ar"] .page .hero .heading h1{
    font-size:clamp(34px, 4.2vw, 60px) !important;
    line-height:1.05 !important;
    letter-spacing:-0.035em !important;
    font-weight:400 !important;
    white-space:nowrap !important;
  }
}


/* v70: tighten Arabic desktop logo block and move coffee icon to far left */
@media (min-width: 981px){
  html[lang="ar"] .page .hero .brand-logo{
    width:max-content !important;
    max-width:620px !important;
    grid-template-columns:max-content 82px !important;
    column-gap:8px !important;
    justify-self:start !important;
  }

  html[lang="ar"] .page .hero .brand-copy{
    padding-top:8px !important;
  }

  html[lang="ar"] .page .hero .brand-sub{
    display:inline-flex !important;
    flex-direction:row !important;
    direction:ltr !important;
    align-self:flex-start !important;
    padding:8px 14px 8px 10px !important;
    gap:10px !important;
  }

  html[lang="ar"] .page .hero .brand-sub .coffee-trigger{
    order:-2 !important;
    margin-right:4px !important;
    margin-left:0 !important;
  }

  html[lang="ar"] .page .hero .brand-sub .coffee-arrow{
    order:-1 !important;
    margin-right:2px !important;
    margin-left:0 !important;
  }

  html[lang="ar"] .page .hero .brand-sub .coffee-text{
    direction:rtl !important;
    text-align:right !important;
  }
}


/* Arabic footer center fix */
html[lang="ar"] .board-footer{
  text-align:center !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}
html[lang="ar"] .board-footer > span,
html[lang="ar"] .board-footer > div{
  width:100%;
  text-align:center !important;
}
html[lang="ar"] .board-footer > span{
  direction:rtl;
  unicode-bidi:plaintext;
  margin-inline:auto;
}

/* v71: slightly enlarge key Arabic UI labels for better readability */
html[lang="ar"] .hero-kicker{
  font-size: 15px !important;
  line-height: 1.2 !important;
}

html[lang="ar"] .hero-link-btn,
html[lang="ar"] .top-icon-menu summary,
html[lang="ar"] .language-menu summary,
html[lang="ar"] .collections-menu summary{
  font-size: 15px !important;
  line-height: 1.2 !important;
}

html[lang="ar"] .btn.primary,
html[lang="ar"] #openComposeBtn{
  font-size: 17px !important;
  line-height: 1.15 !important;
}

html[lang="ar"] .latest-inline-links .hero-link-btn,
html[lang="ar"] .latest-head-row .hero-link-btn,
html[lang="ar"] [data-scroll-target="sensitive-section"],
html[lang="ar"] [data-latest-answered="true"]{
  font-size: 15px !important;
  line-height: 1.2 !important;
}

/* v10: bump Arabic UI labels a little more without breaking layout */
@media (min-width: 981px){
  html[lang="ar"] .page .hero > .hero-actions #openComposeBtn{
    font-size: clamp(19px, 1.85vw, 24px) !important;
    line-height: 1.18 !important;
  }
  html[lang="ar"] .page .hero > .hero-actions .language-menu summary,
  html[lang="ar"] .page .hero > .hero-actions .collections-menu summary,
  html[lang="ar"] .page .hero > .hero-actions .hero-link-btn{
    font-size: clamp(18px, 1.6vw, 22px) !important;
    line-height: 1.2 !important;
  }
  html[lang="ar"] .page .hero .hero-kicker{
    font-size: clamp(18px, 1.45vw, 22px) !important;
    line-height: 1.15 !important;
  }
  html[lang="ar"] .section-head h2,
  html[lang="ar"] .section-head h4,
  html[lang="ar"] .latest-inline-link{
    font-size: clamp(20px, 1.75vw, 25px) !important;
    line-height: 1.22 !important;
  }
}

@media (max-width: 980px){
  html[lang="ar"] .hero-actions #openComposeBtn{
    font-size: clamp(18px, 4.8vw, 22px) !important;
  }
  html[lang="ar"] .hero-actions .language-menu summary,
  html[lang="ar"] .hero-actions .collections-menu summary,
  html[lang="ar"] .hero-actions .hero-link-btn{
    font-size: clamp(16px, 4.1vw, 20px) !important;
  }
  html[lang="ar"] .hero .hero-kicker{
    font-size: clamp(16px, 4.2vw, 20px) !important;
  }
  html[lang="ar"] .section-head h2,
  html[lang="ar"] .section-head h4,
  html[lang="ar"] .latest-inline-link{
    font-size: clamp(18px, 4.6vw, 22px) !important;
  }
}


/* Reply edit/support textarea: fixed size with internal scroll */
#noteModal .support-textarea,
#composeModal .support-textarea{
  resize:none !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}


.sr-only{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;white-space:nowrap!important;border:0!important;}

/* v72: easier mobile language switcher using native select */
.hero-actions .mobile-language-picker{
  display:none;
}

@media (max-width:760px){
  .hero-actions .language-menu{
    display:none !important;
  }

  .hero-actions .mobile-language-picker{
    display:block !important;
    width:100%;
    position:relative;
    order:2;
  }

  .hero-actions .mobile-language-picker::before{
    content:"🌐";
    position:absolute;
    inset-inline-start:14px;
    top:50%;
    transform:translateY(-50%);
    font-size:18px;
    line-height:1;
    pointer-events:none;
    z-index:1;
  }

  .hero-actions .mobile-language-picker::after{
    content:"▾";
    position:absolute;
    inset-inline-end:14px;
    top:50%;
    transform:translateY(-50%);
    font-size:16px;
    line-height:1;
    color:var(--ink);
    pointer-events:none;
  }

  .hero-actions .mobile-language-select{
    -webkit-appearance:none;
    appearance:none;
    display:block;
    width:100%;
    min-height:48px;
    border:2px solid var(--line);
    border-radius:16px;
    background:linear-gradient(180deg,var(--paper),#fff6ee);
    box-shadow:var(--shadow-soft);
    color:var(--ink);
    font:inherit;
    font-weight:800;
    line-height:1.2;
    padding:12px 44px 12px 44px;
    cursor:pointer;
  }

  .hero-actions .mobile-language-select:focus-visible{
    outline:3px solid rgba(143,220,255,.75);
    outline-offset:2px;
  }

  html[lang="ar"] .hero-actions .mobile-language-select{
    text-align:start;
  }
}

@media (min-width:761px){
  .hero-actions .mobile-language-picker{
    display:none !important;
  }
}

/* v73: harden Arabic mobile hero title sizing for very small phones */
@media (max-width:760px){
  html[lang="ar"] .hero .heading h1,
  html[lang="ar"] .page .hero .heading h1,
  html[lang="ar"] .heading h1{
    font-size:clamp(20px, 6.2vw, 26px) !important;
    line-height:1.12 !important;
    letter-spacing:-0.02em !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    hyphens:auto;
  }
}

/* v74: center Arabic mobile hero upper section */
@media (max-width:760px){
  html[lang="ar"] .hero > .heading,
  html[lang="ar"] .page .hero > .heading{
    justify-self:center !important;
    width:100% !important;
    margin-inline:auto !important;
    text-align:center !important;
    align-items:center !important;
  }

  html[lang="ar"] .hero .hero-kicker,
  html[lang="ar"] .page .hero .hero-kicker,
  html[lang="ar"] .hero .heading h1,
  html[lang="ar"] .page .hero .heading h1{
    text-align:center !important;
    margin-inline:auto !important;
  }

  html[lang="ar"] .hero > .header-illustration,
  html[lang="ar"] .page .hero > .header-illustration{
    justify-self:center !important;
    width:100% !important;
    margin-inline:auto !important;
  }

  html[lang="ar"] .hero .brand-logo,
  html[lang="ar"] .page .hero .brand-logo{
    width:100% !important;
    max-width:340px !important;
    margin-inline:auto !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:14px !important;
    text-align:center !important;
  }

  html[lang="ar"] .hero .brand-copy,
  html[lang="ar"] .page .hero .brand-copy{
    width:100% !important;
    align-items:center !important;
    text-align:center !important;
  }

  html[lang="ar"] .hero .brand-kicker,
  html[lang="ar"] .page .hero .brand-kicker,
  html[lang="ar"] .hero .brand-title,
  html[lang="ar"] .page .hero .brand-title,
  html[lang="ar"] .hero .brand-title span,
  html[lang="ar"] .page .hero .brand-title span{
    text-align:center !important;
    justify-content:center !important;
  }

  html[lang="ar"] .hero .brand-sub,
  html[lang="ar"] .page .hero .brand-sub{
    align-self:center !important;
    margin-inline:auto !important;
  }
}

/* v75: compact Arabic mobile hero so the top area feels tighter and more intentional */
@media (max-width:760px){
  html[lang="ar"] .page .hero,
  html[lang="ar"] .hero{
    gap:10px !important;
    margin-bottom:10px !important;
  }

  html[lang="ar"] .page .hero > .heading,
  html[lang="ar"] .hero > .heading{
    margin-bottom:0 !important;
  }

  html[lang="ar"] .page .hero .hero-kicker,
  html[lang="ar"] .hero .hero-kicker{
    margin-bottom:4px !important;
    font-size:12px !important;
  }

  html[lang="ar"] .page .hero .heading h1,
  html[lang="ar"] .hero .heading h1{
    font-size:clamp(21px, 5.8vw, 27px) !important;
    line-height:1.08 !important;
    max-width:13ch !important;
  }

  html[lang="ar"] .page .hero .heading h1::after,
  html[lang="ar"] .hero .heading h1::after{
    margin-top:10px !important;
    width:min(100%, 320px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    height:5px !important;
  }

  html[lang="ar"] .page .hero > .header-illustration,
  html[lang="ar"] .hero > .header-illustration{
    margin-top:-2px !important;
  }

  html[lang="ar"] .page .hero .brand-logo,
  html[lang="ar"] .hero .brand-logo{
    width:100% !important;
    max-width:320px !important;
    padding:14px 16px !important;
    gap:10px !important;
    background:linear-gradient(180deg, rgba(255,247,212,.08), rgba(255,247,212,.03)) !important;
    border:1px solid rgba(247,241,223,.16) !important;
    border-radius:24px !important;
    box-shadow:0 10px 24px rgba(0,0,0,.12) !important;
  }

  html[lang="ar"] .page .hero .brand-mark,
  html[lang="ar"] .hero .brand-mark{
    width:68px !important;
    height:68px !important;
    flex-basis:68px !important;
  }

  html[lang="ar"] .page .hero .brand-note,
  html[lang="ar"] .hero .brand-note{
    width:34px !important;
    height:34px !important;
    left:15px !important;
    top:15px !important;
  }

  html[lang="ar"] .page .hero .brand-heart,
  html[lang="ar"] .hero .brand-heart{
    width:26px !important;
    height:26px !important;
    font-size:12px !important;
  }

  html[lang="ar"] .page .hero .brand-copy,
  html[lang="ar"] .hero .brand-copy{
    gap:4px !important;
  }

  html[lang="ar"] .page .hero .brand-kicker,
  html[lang="ar"] .hero .brand-kicker{
    font-size:12px !important;
    line-height:1.15 !important;
    letter-spacing:0 !important;
  }

  html[lang="ar"] .page .hero .brand-title,
  html[lang="ar"] .hero .brand-title{
    font-size:18px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
  }

  html[lang="ar"] .page .hero .brand-sub,
  html[lang="ar"] .hero .brand-sub{
    margin-top:6px !important;
    padding:7px 12px !important;
    font-size:11.5px !important;
    line-height:1.15 !important;
    box-shadow:0 8px 16px rgba(0,0,0,.12) !important;
  }

  html[lang="ar"] .page .hero > .hero-actions,
  html[lang="ar"] .hero > .hero-actions{
    margin-top:2px !important;
    padding-top:4px !important;
    gap:10px !important;
    justify-content:center !important;
  }

  html[lang="ar"] .page .hero > .hero-actions #openComposeBtn,
  html[lang="ar"] .page .hero > .hero-actions .collections-menu,
  html[lang="ar"] .page .hero > .hero-actions .mobile-language-picker,
  html[lang="ar"] .page .hero > .hero-actions .hero-link-btn,
  html[lang="ar"] .hero > .hero-actions #openComposeBtn,
  html[lang="ar"] .hero > .hero-actions .collections-menu,
  html[lang="ar"] .hero > .hero-actions .mobile-language-picker,
  html[lang="ar"] .hero > .hero-actions .hero-link-btn{
    width:min(100%, 320px) !important;
    margin-inline:auto !important;
  }

  html[lang="ar"] .page .hero > .hero-actions .top-icon-menu summary,
  html[lang="ar"] .page .hero > .hero-actions .mobile-language-select,
  html[lang="ar"] .page .hero > .hero-actions .hero-link-btn,
  html[lang="ar"] .page .hero > .hero-actions .btn.primary,
  html[lang="ar"] .hero > .hero-actions .top-icon-menu summary,
  html[lang="ar"] .hero > .hero-actions .mobile-language-select,
  html[lang="ar"] .hero > .hero-actions .hero-link-btn,
  html[lang="ar"] .hero > .hero-actions .btn.primary{
    min-height:44px !important;
    border-radius:14px !important;
  }

  html[lang="ar"] .page .hero > .hero-actions .mobile-language-picker,
  html[lang="ar"] .hero > .hero-actions .mobile-language-picker{
    order:3 !important;
  }

  html[lang="ar"] .page .hero > .hero-actions .mobile-language-select,
  html[lang="ar"] .hero > .hero-actions .mobile-language-select{
    padding:10px 40px !important;
    font-size:15px !important;
    background:linear-gradient(180deg, rgba(255,249,241,.98), rgba(255,243,232,.98)) !important;
  }

  html[lang="ar"] .page .hero > .hero-actions .mobile-language-picker::before,
  html[lang="ar"] .hero > .hero-actions .mobile-language-picker::before{
    inset-inline-start:16px !important;
    font-size:17px !important;
  }

  html[lang="ar"] .page .hero > .hero-actions .mobile-language-picker::after,
  html[lang="ar"] .hero > .hero-actions .mobile-language-picker::after{
    inset-inline-end:16px !important;
    font-size:14px !important;
  }
}

/* v76: Arabic mobile polish — single-line hero title, tighter spacing, calmer cards/footer */
@media (max-width:760px){
  html[lang="ar"] .page{
    padding:14px 10px 22px !important;
  }

  html[lang="ar"] .hero,
  html[lang="ar"] .page .hero{
    gap:8px !important;
    margin-bottom:6px !important;
  }

  html[lang="ar"] .hero > .heading,
  html[lang="ar"] .page .hero > .heading{
    gap:2px !important;
    margin-bottom:0 !important;
  }

  html[lang="ar"] .hero .hero-kicker,
  html[lang="ar"] .page .hero .hero-kicker{
    font-size:11px !important;
    margin-bottom:1px !important;
    letter-spacing:0 !important;
  }

  html[lang="ar"] .hero .heading h1,
  html[lang="ar"] .page .hero .heading h1{
    width:max-content !important;
    max-width:100% !important;
    margin-inline:auto !important;
    font-size:clamp(18px, 5.3vw, 22px) !important;
    line-height:1.05 !important;
    letter-spacing:-0.03em !important;
    white-space:nowrap !important;
    text-wrap:nowrap !important;
  }

  html[lang="ar"] .hero .heading h1::after,
  html[lang="ar"] .page .hero .heading h1::after{
    width:min(270px, 84vw) !important;
    height:4px !important;
    bottom:-6px !important;
  }

  html[lang="ar"] .hero > .header-illustration,
  html[lang="ar"] .page .hero > .header-illustration{
    margin-top:0 !important;
  }

  html[lang="ar"] .hero .brand-logo,
  html[lang="ar"] .page .hero .brand-logo{
    max-width:310px !important;
    padding:10px 12px !important;
    gap:8px !important;
    border-radius:20px !important;
    box-shadow:0 8px 18px rgba(0,0,0,.10) !important;
  }

  html[lang="ar"] .hero .brand-mark,
  html[lang="ar"] .page .hero .brand-mark{
    width:60px !important;
    height:60px !important;
    flex-basis:60px !important;
  }

  html[lang="ar"] .hero .brand-note,
  html[lang="ar"] .page .hero .brand-note{
    width:30px !important;
    height:30px !important;
    left:13px !important;
    top:13px !important;
  }

  html[lang="ar"] .hero .brand-heart,
  html[lang="ar"] .page .hero .brand-heart{
    width:24px !important;
    height:24px !important;
    font-size:11px !important;
  }

  html[lang="ar"] .hero .brand-copy,
  html[lang="ar"] .page .hero .brand-copy{
    gap:3px !important;
  }

  html[lang="ar"] .hero .brand-kicker,
  html[lang="ar"] .page .hero .brand-kicker{
    font-size:11px !important;
    line-height:1.1 !important;
  }

  html[lang="ar"] .hero .brand-title,
  html[lang="ar"] .page .hero .brand-title{
    font-size:16px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
  }

  html[lang="ar"] .hero .brand-sub,
  html[lang="ar"] .page .hero .brand-sub{
    margin-top:5px !important;
    padding:6px 10px !important;
    font-size:10.75px !important;
    line-height:1.1 !important;
    min-height:40px !important;
  }

  html[lang="ar"] .hero > .hero-actions,
  html[lang="ar"] .page .hero > .hero-actions{
    gap:8px !important;
    margin-top:0 !important;
    padding-top:2px !important;
  }

  html[lang="ar"] .hero > .hero-actions #openComposeBtn,
  html[lang="ar"] .hero > .hero-actions .collections-menu,
  html[lang="ar"] .hero > .hero-actions .mobile-language-picker,
  html[lang="ar"] .page .hero > .hero-actions #openComposeBtn,
  html[lang="ar"] .page .hero > .hero-actions .collections-menu,
  html[lang="ar"] .page .hero > .hero-actions .mobile-language-picker{
    width:min(100%, 310px) !important;
  }

  html[lang="ar"] .hero > .hero-actions .btn.primary,
  html[lang="ar"] .hero > .hero-actions .top-icon-menu summary,
  html[lang="ar"] .hero > .hero-actions .mobile-language-select,
  html[lang="ar"] .page .hero > .hero-actions .btn.primary,
  html[lang="ar"] .page .hero > .hero-actions .top-icon-menu summary,
  html[lang="ar"] .page .hero > .hero-actions .mobile-language-select{
    min-height:42px !important;
    border-radius:13px !important;
  }

  html[lang="ar"] .hero > .hero-actions .btn.primary,
  html[lang="ar"] .page .hero > .hero-actions .btn.primary{
    font-size:14px !important;
    padding-block:10px !important;
  }

  html[lang="ar"] .hero > .hero-actions .mobile-language-select,
  html[lang="ar"] .page .hero > .hero-actions .mobile-language-select{
    font-size:14px !important;
    padding:9px 38px !important;
  }

  html[lang="ar"] .section{
    padding-top:2px !important;
  }

  html[lang="ar"] .section-head{
    margin-bottom:8px !important;
    gap:6px !important;
  }

  html[lang="ar"] .section-head h2,
  html[lang="ar"] .section-head h4{
    font-size:18px !important;
    padding-bottom:8px !important;
    line-height:1.15 !important;
  }

  html[lang="ar"] .section-head h2::after,
  html[lang="ar"] .section-head h4::after{
    width:min(180px, 100%) !important;
    height:4px !important;
    bottom:-5px !important;
  }

  html[lang="ar"] .latest-head-row,
  html[lang="ar"] .latest-inline-links{
    gap:6px !important;
  }

  html[lang="ar"] .latest-inline-links .hero-link-btn{
    font-size:11px !important;
    padding:2px 0 !important;
  }

  html[lang="ar"] .section-pager{
    gap:10px !important;
  }

  html[lang="ar"] .pager-btn{
    padding:2px 4px !important;
    font-size:11px !important;
  }

  html[lang="ar"] .pager-info{
    min-width:34px !important;
    font-size:11px !important;
  }

  html[lang="ar"] .masonry.paged-grid{
    gap:10px !important;
  }

  html[lang="ar"] .masonry.paged-grid > *{
    margin-bottom:0 !important;
  }

  html[lang="ar"] .note{
    border-radius:22px !important;
    padding:14px 14px 15px !important;
    box-shadow:0 8px 18px rgba(0,0,0,.08) !important;
  }

  html[lang="ar"] .note-top{
    gap:8px !important;
    padding-left:0 !important;
  }

  html[lang="ar"] .identity{
    gap:8px !important;
  }

  html[lang="ar"] .avatar{
    width:42px !important;
    height:42px !important;
    font-size:20px !important;
  }

  html[lang="ar"] .name{
    font-size:15px !important;
    line-height:1.15 !important;
  }

  html[lang="ar"] .meta{
    font-size:11px !important;
    line-height:1.2 !important;
  }

  html[lang="ar"] .badge{
    font-size:10.5px !important;
    padding:5px 10px !important;
  }

  html[lang="ar"] .title{
    margin-top:10px !important;
    font-size:17px !important;
    line-height:1.16 !important;
  }

  html[lang="ar"] .body{
    margin-top:10px !important;
    font-size:14px !important;
    line-height:1.5 !important;
  }

  html[lang="ar"] .reply-label{
    margin-top:10px !important;
    font-size:11px !important;
    line-height:1.25 !important;
  }

  html[lang="ar"] .action-row{
    gap:6px !important;
    margin-top:8px !important;
  }

  html[lang="ar"] .reply-btn,
  html[lang="ar"] .tiny-btn{
    min-height:38px !important;
    padding:7px 12px !important;
    font-size:12px !important;
  }

  html[lang="ar"] .board-footer{
    margin-top:12px !important;
    padding-top:10px !important;
    font-size:11px !important;
    line-height:1.45 !important;
  }

  html[lang="ar"] .visit-count{
    margin:0 auto 8px !important;
    padding:3px 8px !important;
    font-size:11px !important;
    gap:4px !important;
  }
}


/* v77: Arabic mobile spacing + filter cleanup */
@media (max-width:760px){
  html[lang="ar"] .page{
    padding:12px 10px 18px !important;
  }

  html[lang="ar"] .hero,
  html[lang="ar"] .page .hero{
    gap:6px !important;
    padding-top:0 !important;
    padding-bottom:4px !important;
    margin-bottom:2px !important;
  }

  html[lang="ar"] .hero > .heading,
  html[lang="ar"] .page .hero > .heading{
    gap:0 !important;
  }

  html[lang="ar"] .hero .hero-kicker,
  html[lang="ar"] .page .hero .hero-kicker{
    margin:0 auto 2px !important;
    font-size:10.5px !important;
  }

  html[lang="ar"] .hero .heading h1,
  html[lang="ar"] .page .hero .heading h1{
    font-size:clamp(18px, 5.05vw, 21px) !important;
    line-height:1.04 !important;
    letter-spacing:-0.022em !important;
  }

  html[lang="ar"] .hero .heading h1::after,
  html[lang="ar"] .page .hero .heading h1::after{
    width:min(258px, 82vw) !important;
    bottom:-5px !important;
  }

  html[lang="ar"] .hero .brand-logo,
  html[lang="ar"] .page .hero .brand-logo{
    max-width:296px !important;
    padding:8px 10px !important;
    gap:6px !important;
    border-radius:18px !important;
  }

  html[lang="ar"] .hero .brand-mark,
  html[lang="ar"] .page .hero .brand-mark{
    width:56px !important;
    height:56px !important;
    flex-basis:56px !important;
  }

  html[lang="ar"] .hero .brand-note,
  html[lang="ar"] .page .hero .brand-note{
    width:28px !important;
    height:28px !important;
    left:12px !important;
    top:12px !important;
  }

  html[lang="ar"] .hero .brand-heart,
  html[lang="ar"] .page .hero .brand-heart{
    width:22px !important;
    height:22px !important;
    font-size:10px !important;
  }

  html[lang="ar"] .hero .brand-copy,
  html[lang="ar"] .page .hero .brand-copy{
    gap:2px !important;
  }

  html[lang="ar"] .hero .brand-kicker,
  html[lang="ar"] .page .hero .brand-kicker{
    font-size:10.5px !important;
    line-height:1.08 !important;
  }

  html[lang="ar"] .hero .brand-title,
  html[lang="ar"] .page .hero .brand-title{
    font-size:15px !important;
    line-height:1.12 !important;
  }

  html[lang="ar"] .hero .brand-sub,
  html[lang="ar"] .page .hero .brand-sub{
    margin-top:4px !important;
    padding:5px 9px 5px 10px !important;
    font-size:10px !important;
    line-height:1.08 !important;
    min-height:36px !important;
    gap:8px !important;
  }

  html[lang="ar"] .hero .brand-sub .coffee-trigger,
  html[lang="ar"] .page .hero .brand-sub .coffee-trigger{
    width:31px !important;
    height:31px !important;
    border-radius:12px !important;
  }

  html[lang="ar"] .hero > .hero-actions,
  html[lang="ar"] .page .hero > .hero-actions{
    gap:6px !important;
    margin-top:0 !important;
    padding-top:0 !important;
    border-top:0 !important;
  }

  html[lang="ar"] .hero > .hero-actions #openComposeBtn,
  html[lang="ar"] .hero > .hero-actions .collections-menu,
  html[lang="ar"] .hero > .hero-actions .mobile-language-picker,
  html[lang="ar"] .page .hero > .hero-actions #openComposeBtn,
  html[lang="ar"] .page .hero > .hero-actions .collections-menu,
  html[lang="ar"] .page .hero > .hero-actions .mobile-language-picker{
    width:min(100%, 296px) !important;
  }

  html[lang="ar"] .hero > .hero-actions .btn.primary,
  html[lang="ar"] .hero > .hero-actions .top-icon-menu summary,
  html[lang="ar"] .hero > .hero-actions .mobile-language-select,
  html[lang="ar"] .page .hero > .hero-actions .btn.primary,
  html[lang="ar"] .page .hero > .hero-actions .top-icon-menu summary,
  html[lang="ar"] .page .hero > .hero-actions .mobile-language-select{
    min-height:40px !important;
    border-radius:12px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }

  html[lang="ar"] .hero > .hero-actions .btn.primary,
  html[lang="ar"] .page .hero > .hero-actions .btn.primary{
    font-size:13.5px !important;
  }

  html[lang="ar"] .hero > .hero-actions .mobile-language-select,
  html[lang="ar"] .page .hero > .hero-actions .mobile-language-select{
    font-size:13.5px !important;
    padding-inline:36px !important;
  }

  html[lang="ar"] .board-wrap{
    margin-top:4px !important;
    padding:10px 8px 14px !important;
    border-radius:26px !important;
  }

  html[lang="ar"] .toolbar{
    margin-bottom:6px !important;
    min-height:0 !important;
  }

  html[lang="ar"] .content{
    gap:14px !important;
  }

  html[lang="ar"] .section{
    padding-top:0 !important;
  }

  html[lang="ar"] .section-head{
    margin:0 0 6px !important;
    gap:5px !important;
    padding-inline:2px !important;
  }

  html[lang="ar"] .section-head h2,
  html[lang="ar"] .section-head h4{
    font-size:17px !important;
    padding-bottom:7px !important;
  }

  html[lang="ar"] .section-head h2::after,
  html[lang="ar"] .section-head h4::after{
    width:min(170px, 100%) !important;
    bottom:-4px !important;
  }

  html[lang="ar"] .section-pager{
    gap:8px !important;
  }

  html[lang="ar"] .pager-btn{
    font-size:10.5px !important;
    min-height:34px !important;
  }

  html[lang="ar"] .pager-info{
    font-size:11px !important;
  }

  html[lang="ar"] #latest-section .latest-section-head{
    margin-bottom:4px !important;
  }

  html[lang="ar"] #latest-section .latest-head-row{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:4px !important;
  }

  html[lang="ar"] #latest-section .latest-inline-links{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
  }

  html[lang="ar"] #latest-section .latest-inline-links .hero-link-btn{
    min-height:34px !important;
    padding:7px 10px !important;
    font-size:11.5px !important;
    line-height:1.2 !important;
    border:1.5px solid rgba(247,241,223,.18) !important;
    border-radius:999px !important;
    background:rgba(255,253,248,.08) !important;
    color:var(--chalk) !important;
    text-decoration:none !important;
    box-shadow:none !important;
  }

  html[lang="ar"] #latest-section .latest-filter-bar,
  html[lang="ar"] #latest-section .latest-filter-bar.is-active{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:6px !important;
    margin:0 0 8px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  html[lang="ar"] #latest-section .latest-filter-chip,
  html[lang="ar"] #latest-section .latest-filter-clear{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
    direction:rtl !important;
  }

  html[lang="ar"] #latest-section .latest-filter-chip{
    min-height:40px !important;
    padding:9px 12px !important;
    border-radius:16px !important;
    background:rgba(255,253,248,.92) !important;
    color:#17322b !important;
    box-shadow:0 6px 12px rgba(0,0,0,.08) !important;
    font-size:12px !important;
    line-height:1.25 !important;
  }

  html[lang="ar"] #latest-section .latest-filter-chip strong{
    color:#17322b !important;
  }

  html[lang="ar"] #latest-section .latest-filter-clear{
    min-height:38px !important;
    padding:8px 12px !important;
    border-radius:14px !important;
    font-size:12.5px !important;
  }

  html[lang="ar"] .masonry.paged-grid{
    gap:8px !important;
  }

  html[lang="ar"] .note{
    border-radius:20px !important;
    padding:12px 12px 13px !important;
  }

  html[lang="ar"] .note-top,
  html[lang="ar"] .identity{
    gap:7px !important;
  }

  html[lang="ar"] .avatar{
    width:40px !important;
    height:40px !important;
    font-size:18px !important;
  }

  html[lang="ar"] .name{
    font-size:14px !important;
  }

  html[lang="ar"] .meta{
    font-size:10.5px !important;
  }

  html[lang="ar"] .badge{
    font-size:10px !important;
    padding:4px 9px !important;
  }

  html[lang="ar"] .title{
    margin-top:8px !important;
    font-size:16px !important;
    line-height:1.14 !important;
  }

  html[lang="ar"] .body{
    margin-top:8px !important;
    font-size:13.5px !important;
    line-height:1.45 !important;
  }

  html[lang="ar"] .reply-label{
    margin-top:8px !important;
    font-size:10.75px !important;
  }

  html[lang="ar"] .action-row{
    margin-top:6px !important;
    gap:6px !important;
  }

  html[lang="ar"] .reply-btn,
  html[lang="ar"] .tiny-btn,
  html[lang="ar"] .read-btn{
    min-height:36px !important;
    padding:6px 10px !important;
    font-size:11.5px !important;
  }

  html[lang="ar"] .floating-top{
    width:40px !important;
    height:40px !important;
    right:10px !important;
    bottom:12px !important;
    border-radius:12px !important;
  }

  html[lang="ar"] .board-footer{
    margin-top:8px !important;
    padding-top:8px !important;
    font-size:10.5px !important;
    line-height:1.4 !important;
  }

  html[lang="ar"] .board-footer > span{
    max-width:34ch !important;
    margin-inline:auto !important;
  }

  html[lang="ar"] .visit-count{
    margin:0 auto 6px !important;
    padding:3px 7px !important;
    font-size:10.5px !important;
  }
}


/* === Mobile redesign v2 (stable) === */
@media (max-width: 760px){
  .page{
    padding:12px !important;
    gap:12px !important;
  }

  .page > *{
    min-width:0 !important;
  }

  .hero{
    display:block !important;
    padding:18px 14px 14px !important;
    border-radius:28px !important;
    border:1px solid rgba(247,241,223,.12) !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 35%),
      linear-gradient(180deg, rgba(17,90,82,.97) 0%, rgba(10,72,66,.98) 100%) !important;
    box-shadow:0 20px 40px rgba(0,0,0,.20) !important;
    overflow:hidden !important;
  }

  .hero::before,
  .hero::after{
    display:none !important;
  }

  .heading{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    margin:0 0 12px !important;
    text-align:center !important;
  }

  .hero-kicker{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:7px 12px !important;
    border-radius:999px !important;
    border:1px solid rgba(247,241,223,.16) !important;
    background:rgba(255,255,255,.06) !important;
    color:rgba(255,241,224,.84) !important;
    font-size:12px !important;
    font-weight:800 !important;
    letter-spacing:.03em !important;
    text-transform:none !important;
  }

  .heading h1,
  html[lang="ar"] .heading h1{
    margin:0 !important;
    max-width:11ch !important;
    font-size:clamp(28px, 9vw, 38px) !important;
    line-height:1.04 !important;
    letter-spacing:-.04em !important;
    color:#fff8ef !important;
    text-align:center !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:keep-all !important;
    text-wrap:balance !important;
  }

  .heading h1::after{
    content:"" !important;
    position:static !important;
    display:block !important;
    width:min(100%, 270px) !important;
    height:6px !important;
    margin:10px auto 0 !important;
    border-radius:999px !important;
    background:linear-gradient(90deg, #f08ed0 0%, #f0cb5c 56%, #8fe3f0 100%) !important;
    opacity:1 !important;
  }

  .header-illustration{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
  }

  .brand-logo{
    position:relative !important;
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:18px 14px !important;
    border-radius:24px !important;
    border:1px solid rgba(247,241,223,.10) !important;
    background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.04) 100%) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
    justify-content:center !important;
    gap:0 !important;
  }

  .brand-logo::after{
    display:none !important;
  }

  .brand-mark{
    width:100px !important;
    height:100px !important;
    margin:0 auto 14px !important;
    flex:0 0 auto !important;
  }

  .brand-copy{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    min-width:0 !important;
    text-align:center !important;
  }

  .brand-kicker{
    margin:0 !important;
    color:rgba(255,245,230,.84) !important;
    font-size:14px !important;
    line-height:1.2 !important;
    letter-spacing:.01em !important;
    font-weight:800 !important;
    text-transform:none !important;
  }

  .brand-title{
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
    margin:0 !important;
    color:#fff8ef !important;
    font-size:clamp(20px, 6.4vw, 28px) !important;
    line-height:1.16 !important;
    font-weight:900 !important;
    text-transform:none !important;
    letter-spacing:-.02em !important;
    align-items:center !important;
    text-align:center !important;
  }

  .brand-title span{
    display:block !important;
    white-space:normal !important;
  }

  .brand-sub{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    width:100% !important;
    min-height:54px !important;
    margin-top:4px !important;
    padding:10px 14px 10px 18px !important;
    border-radius:999px !important;
    border:1px solid rgba(178,135,58,.18) !important;
    background:linear-gradient(180deg, #f6e9a9 0%, #f1df8f 100%) !important;
    box-shadow:0 14px 22px rgba(7,34,31,.14) !important;
    color:#65452a !important;
    text-align:center !important;
  }

  .brand-sub::after{
    display:none !important;
  }

  .coffee-trigger{
    order:-1 !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    box-shadow:0 8px 14px rgba(117,76,38,.14) !important;
  }

  .coffee-text,
  .coffee-arrow{
    font-size:15px !important;
    font-weight:900 !important;
    line-height:1.15 !important;
  }

  .coffee-arrow{
    opacity:.84 !important;
  }

  .hero-actions{
    margin-top:12px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    align-items:stretch !important;
  }

  .hero > .hero-actions{
    border-top:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }

  .hero-actions > *{
    width:100% !important;
    min-width:0 !important;
  }

  .hero-actions .btn,
  .hero-actions .hero-link-btn,
  .hero-actions .top-icon-menu,
  .hero-actions .top-icon-menu summary,
  .mobile-language-picker,
  .mobile-language-select{
    width:100% !important;
  }

  .hero-actions #openComposeBtn{
    min-height:58px !important;
    padding:14px 18px !important;
    border-radius:20px !important;
    font-size:clamp(19px, 5.8vw, 24px) !important;
    line-height:1.15 !important;
    justify-content:center !important;
  }

  .hero-actions .language-menu{
    display:none !important;
  }

  .hero-actions .collections-menu,
  .hero-actions .collections-menu summary,
  .mobile-language-picker,
  .mobile-language-select,
  .hero-actions .hero-link-btn{
    min-height:48px !important;
    border-radius:18px !important;
  }

  .hero-actions .collections-menu summary,
  .hero-actions .hero-link-btn,
  .mobile-language-select{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:12px 16px !important;
    border:1px solid rgba(247,241,223,.12) !important;
    background:rgba(255,255,255,.055) !important;
    color:#fff4e5 !important;
    box-shadow:none !important;
    font-size:15px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    text-align:center !important;
  }

  .hero-actions .collections-menu summary{
    gap:10px !important;
  }

  .hero-actions .top-icon-badge{
    font-size:1.1em !important;
    line-height:1 !important;
  }

  .mobile-language-picker{
    display:block !important;
    margin:0 !important;
  }

  .mobile-language-picker label{
    display:none !important;
  }

  .mobile-language-select{
    appearance:none !important;
    -webkit-appearance:none !important;
    background-image:
      linear-gradient(45deg, transparent 50%, rgba(255,244,229,.72) 50%),
      linear-gradient(135deg, rgba(255,244,229,.72) 50%, transparent 50%);
    background-position:
      calc(100% - 22px) calc(50% - 2px),
      calc(100% - 16px) calc(50% - 2px) !important;
    background-size:6px 6px, 6px 6px !important;
    background-repeat:no-repeat !important;
    padding-right:38px !important;
    cursor:pointer !important;
  }

  .hero-actions .collections-dropdown-list,
  .hero-actions .language-dropdown-list{
    width:100% !important;
    max-width:none !important;
    margin-top:8px !important;
    border-radius:18px !important;
  }

  .board-wrap{
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  .board-wrap::before,
  .toolbar{
    display:none !important;
  }

  .content{
    gap:12px !important;
  }

  .content > section,
  #highlights-section,
  #latest-section,
  #sensitive-section{
    padding:16px 14px !important;
    border-radius:26px !important;
    border:1px solid rgba(247,241,223,.10) !important;
    background:linear-gradient(180deg, rgba(11,78,71,.92) 0%, rgba(8,66,60,.96) 100%) !important;
    box-shadow:0 16px 30px rgba(0,0,0,.15) !important;
  }

  .section-head,
  .latest-section-head{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px !important;
    margin-bottom:10px !important;
  }

  .latest-head-row{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
  }

  .section-head h2,
  .section-head h4,
  .latest-head-row h4,
  html[lang="ar"] .section-head h2,
  html[lang="ar"] .section-head h4,
  html[lang="ar"] .latest-head-row h4{
    margin:0 !important;
    font-size:clamp(24px, 8vw, 34px) !important;
    line-height:1.07 !important;
    letter-spacing:-.03em !important;
    color:#fff8ef !important;
  }

  .latest-inline-links{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  .latest-inline-links .hero-link-btn{
    min-height:40px !important;
    padding:10px 12px !important;
    border-radius:14px !important;
    font-size:12.5px !important;
    white-space:normal !important;
    background:rgba(255,255,255,.05) !important;
    color:#f8eee0 !important;
  }

  .section-pager{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr auto 1fr !important;
    align-items:center !important;
    gap:8px !important;
  }

  .pager-btn{
    min-height:40px !important;
    border-radius:14px !important;
    padding:9px 12px !important;
    background:rgba(255,255,255,.045) !important;
    border:1px solid rgba(247,241,223,.10) !important;
    color:#f7eee1 !important;
    box-shadow:none !important;
    font-size:13px !important;
    font-weight:800 !important;
  }

  .pager-info{
    min-width:56px !important;
    text-align:center !important;
    font-size:14px !important;
    font-weight:900 !important;
    color:#fff4e5 !important;
  }

  .latest-filter-bar,
  .latest-filter-bar.is-active{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin:0 0 10px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .latest-filter-chip,
  .latest-filter-clear{
    min-height:38px !important;
    padding:8px 12px !important;
    border-radius:14px !important;
    font-size:12px !important;
    line-height:1.2 !important;
    box-shadow:none !important;
  }

  .latest-filter-chip{
    background:rgba(255,252,246,.90) !important;
    color:#15352e !important;
    border:1px solid rgba(179,145,74,.18) !important;
  }

  .latest-filter-clear{
    background:linear-gradient(180deg, #f5e79d 0%, #f0de87 100%) !important;
    border:1px solid rgba(179,145,74,.18) !important;
    color:#5c4227 !important;
  }

  .feature-grid,
  .masonry,
  .paged-grid,
  .masonry.paged-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .note,
  .feature-grid .note,
  .masonry .note{
    width:100% !important;
    min-height:0 !important;
    padding:16px 14px !important;
    border-radius:24px !important;
    border:1px solid rgba(108,84,50,.10) !important;
    box-shadow:0 16px 24px rgba(9,23,20,.12) !important;
  }

  .note::after{
    opacity:.12 !important;
    background-size:11px 11px !important;
  }

  .paper-fold{
    opacity:.8 !important;
    transform:scale(.88) !important;
    transform-origin:bottom left !important;
  }

  .tape::before{
    width:58px !important;
    height:20px !important;
    top:-10px !important;
  }

  .note-top{
    gap:10px !important;
    align-items:flex-start !important;
    padding-left:0 !important;
  }

  .identity{
    gap:10px !important;
    align-items:flex-start !important;
    min-width:0 !important;
  }

  .avatar{
    width:46px !important;
    height:46px !important;
    font-size:20px !important;
    border-width:3px !important;
    box-shadow:0 8px 12px rgba(0,0,0,.08) !important;
  }

  .name{
    margin:0 !important;
    font-size:16px !important;
    line-height:1.08 !important;
    letter-spacing:-.03em !important;
    overflow-wrap:anywhere !important;
  }

  .meta{
    margin-top:5px !important;
    font-size:11px !important;
    line-height:1.35 !important;
    opacity:.84 !important;
  }

  .badge{
    margin-inline-start:auto !important;
    padding:7px 10px !important;
    border-radius:999px !important;
    font-size:10px !important;
    font-weight:900 !important;
    line-height:1 !important;
  }

  .title{
    margin-top:12px !important;
    font-size:clamp(19px, 7.4vw, 26px) !important;
    line-height:1.15 !important;
    letter-spacing:-.04em !important;
  }

  .body{
    margin-top:9px !important;
    font-size:14.5px !important;
    line-height:1.6 !important;
  }

  .reply-label{
    margin-top:10px !important;
    font-size:11.5px !important;
    line-height:1.35 !important;
    opacity:.8 !important;
  }

  .action-row{
    margin-top:10px !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  .reply-btn,
  .read-btn,
  .tiny-btn,
  .edit-btn,
  .delete-btn,
  .report-btn,
  .post-text-action,
  .note-support-action{
    min-height:40px !important;
    padding:9px 13px !important;
    border-radius:14px !important;
    font-size:12.5px !important;
    font-weight:800 !important;
    box-shadow:none !important;
  }

  .board-footer{
    margin-top:2px !important;
    padding:10px 8px 4px !important;
    border-top:1px dashed rgba(247,241,223,.14) !important;
    text-align:center !important;
    font-size:11px !important;
    line-height:1.5 !important;
    color:rgba(255,247,234,.82) !important;
  }

  .visit-count{
    margin:0 auto 6px !important;
    width:fit-content !important;
    max-width:100% !important;
    padding:6px 10px !important;
    border-radius:999px !important;
    border:1px solid rgba(244,232,200,.12) !important;
    background:rgba(255,250,242,.06) !important;
    font-size:11px !important;
    color:#fff4e5 !important;
  }

  .visit-count strong{
    color:#fff9f0 !important;
  }

  .floating-top{
    width:46px !important;
    height:46px !important;
    right:12px !important;
    bottom:14px !important;
    border-radius:16px !important;
    border:1px solid rgba(241,228,196,.18) !important;
    background:rgba(255,248,236,.92) !important;
    box-shadow:0 14px 24px rgba(0,0,0,.16) !important;
  }

  .floating-top:hover{
    box-shadow:0 16px 28px rgba(0,0,0,.18) !important;
  }

  html[dir="rtl"] .hero,
  html[dir="rtl"] .content > section,
  html[dir="rtl"] .section,
  html[dir="rtl"] #highlights-section,
  html[dir="rtl"] #latest-section,
  html[dir="rtl"] #sensitive-section{
    direction:rtl !important;
  }

  html[dir="rtl"] .heading,
  html[dir="rtl"] .brand-copy{
    text-align:center !important;
  }

  html[dir="rtl"] .section-head,
  html[dir="rtl"] .latest-head-row,
  html[dir="rtl"] .note,
  html[dir="rtl"] .note *:not(.brand-title):not(.brand-kicker):not(.coffee-text):not(.coffee-arrow){
    text-align:right;
  }

  html[dir="rtl"] .note-top,
  html[dir="rtl"] .identity,
  html[dir="rtl"] .action-row{
    flex-direction:row-reverse !important;
  }

  html[dir="rtl"] .badge{
    margin-inline-start:0 !important;
    margin-inline-end:auto !important;
  }

  html[dir="rtl"] .hero-actions .collections-menu summary,
  html[dir="rtl"] .mobile-language-select,
  html[dir="rtl"] .hero-actions .hero-link-btn{
    justify-content:center !important;
    text-align:center !important;
  }

  html[dir="rtl"] .mobile-language-select{
    background-position:
      18px calc(50% - 2px),
      24px calc(50% - 2px) !important;
    padding-left:38px !important;
    padding-right:16px !important;
  }

  html[dir="rtl"] .brand-sub{
    flex-direction:row-reverse !important;
  }
}

@media (max-width: 420px){
  .heading h1,
  html[lang="ar"] .heading h1{
    font-size:clamp(24px, 8.4vw, 34px) !important;
    max-width:12ch !important;
  }

  .brand-title{
    font-size:clamp(18px, 6vw, 24px) !important;
  }

  .latest-inline-links{
    grid-template-columns:1fr !important;
  }
}

/* v2.1 mobile polish: restore real logo image and improve first-swipe scrolling on phones */
@media (max-width: 760px){
  .brand-mark{
    width:84px !important;
    height:84px !important;
    margin:0 auto 12px !important;
    border-radius:50% !important;
    background:url("apple-touch-icon.png") center/contain no-repeat !important;
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.14)) !important;
  }

  .brand-ring,
  .brand-note,
  .brand-heart{
    display:none !important;
  }

  .brand-logo{
    padding:16px 14px !important;
  }

  .brand-kicker{
    font-size:13px !important;
  }

  .brand-title{
    font-size:clamp(18px, 6vw, 26px) !important;
    line-height:1.14 !important;
  }

  html,
  body,
  .page,
  .hero,
  .board-wrap,
  .content{
    overscroll-behavior-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  .brand-sub,
  .hero-actions .btn,
  .hero-actions .top-icon-menu summary,
  .hero-actions .hero-link-btn,
  .hero-actions .collections-menu summary,
  .hero-actions .mobile-language-select,
  .pager-btn,
  .latest-filter-chip,
  .latest-filter-clear,
  .reply-btn,
  .read-btn,
  .tiny-btn,
  .edit-btn,
  .delete-btn,
  .report-btn,
  .post-text-action,
  .note-support-action,
  .floating-top{
    touch-action:pan-y pinch-zoom !important;
  }
}


/* v2.2 mobile scroll fix: let the browser start vertical panning on the first swipe */
@media (max-width: 980px){
  html,
  body,
  .page,
  .hero,
  .header-illustration,
  .brand-logo,
  .brand-card,
  .brand-sub,
  .hero-actions,
  .section,
  .section-shell,
  .section-card,
  .section-head,
  .section-pager,
  .notes-grid,
  .note,
  .note-inner,
  .note-body,
  .note-support-preview,
  .latest-filter-bar,
  .latest-filter-chip,
  .collections-menu,
  .top-icon-menu,
  .top-icon-menu summary,
  .hero-link-btn,
  .btn,
  .pager-btn,
  .floating-top,
  .mobile-language-picker,
  .mobile-language-select,
  .language-picker,
  .language-select,
  select,
  button,
  summary,
  a{
    touch-action: pan-y pinch-zoom !important;
  }

  html,
  body{
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .page,
  .hero,
  .header-illustration,
  .brand-logo,
  .brand-card,
  .section,
  .section-shell,
  .section-card,
  .note,
  .note-inner,
  .note-body{
    pointer-events: auto;
  }
}

/* v2.3.1: Arabic mobile hero parity with other locales + fix language picker visibility */
@media (max-width:760px){
  html[lang="ar"] .page{
    padding:12px !important;
    gap:12px !important;
  }

  html[lang="ar"] .hero,
  html[lang="ar"] .page .hero{
    display:block !important;
    padding:18px 14px 14px !important;
    margin-bottom:0 !important;
    border-radius:28px !important;
    border:1px solid rgba(247,241,223,.12) !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 35%),
      linear-gradient(180deg, rgba(17,90,82,.97) 0%, rgba(10,72,66,.98) 100%) !important;
    box-shadow:0 20px 40px rgba(0,0,0,.20) !important;
    overflow:hidden !important;
    gap:0 !important;
  }

  html[lang="ar"] .hero > .heading,
  html[lang="ar"] .page .hero > .heading{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    margin:0 0 12px !important;
    text-align:center !important;
  }

  html[lang="ar"] .hero .hero-kicker,
  html[lang="ar"] .page .hero .hero-kicker{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:7px 12px !important;
    border-radius:999px !important;
    border:1px solid rgba(247,241,223,.16) !important;
    background:rgba(255,255,255,.06) !important;
    color:rgba(255,176,171,.94) !important;
    -webkit-text-fill-color:rgba(255,176,171,.94) !important;
    font-size:12px !important;
    font-weight:800 !important;
    letter-spacing:.03em !important;
    text-transform:none !important;
    text-shadow:none !important;
  }

  html[lang="ar"] .hero .heading h1,
  html[lang="ar"] .page .hero .heading h1{
    margin:0 !important;
    width:auto !important;
    max-width:11ch !important;
    font-size:clamp(28px, 9vw, 38px) !important;
    line-height:1.04 !important;
    letter-spacing:-.04em !important;
    color:#fff8ef !important;
    text-align:center !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:keep-all !important;
    text-wrap:balance !important;
  }

  html[lang="ar"] .hero .heading h1::after,
  html[lang="ar"] .page .hero .heading h1::after{
    content:"" !important;
    position:static !important;
    display:block !important;
    width:min(100%, 270px) !important;
    height:6px !important;
    margin:10px auto 0 !important;
    border-radius:999px !important;
    background:linear-gradient(90deg, #f08ed0 0%, #f0cb5c 56%, #8fe3f0 100%) !important;
    opacity:1 !important;
  }

  html[lang="ar"] .hero > .header-illustration,
  html[lang="ar"] .page .hero > .header-illustration{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  html[lang="ar"] .hero .brand-logo,
  html[lang="ar"] .page .hero .brand-logo{
    position:relative !important;
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:18px 14px !important;
    border-radius:24px !important;
    border:1px solid rgba(247,241,223,.10) !important;
    background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.04) 100%) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
    text-align:center !important;
    justify-content:center !important;
    gap:0 !important;
  }

  html[lang="ar"] .hero .brand-mark,
  html[lang="ar"] .page .hero .brand-mark{
    width:96px !important;
    height:96px !important;
    margin:0 auto 14px !important;
    flex:0 0 auto !important;
  }

  html[lang="ar"] .hero .brand-copy,
  html[lang="ar"] .page .hero .brand-copy{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    min-width:0 !important;
    width:100% !important;
    text-align:center !important;
  }

  html[lang="ar"] .hero .brand-kicker,
  html[lang="ar"] .page .hero .brand-kicker{
    margin:0 !important;
    color:rgba(255,245,230,.84) !important;
    font-size:14px !important;
    line-height:1.2 !important;
    letter-spacing:.01em !important;
    font-weight:800 !important;
    text-transform:none !important;
    text-align:center !important;
  }

  html[lang="ar"] .hero .brand-title,
  html[lang="ar"] .page .hero .brand-title{
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
    margin:0 !important;
    color:#fff8ef !important;
    font-size:clamp(20px, 6.4vw, 28px) !important;
    line-height:1.16 !important;
    font-weight:900 !important;
    letter-spacing:-.02em !important;
    align-items:center !important;
    text-align:center !important;
  }

  html[lang="ar"] .hero .brand-title span,
  html[lang="ar"] .page .hero .brand-title span{
    display:block !important;
    white-space:normal !important;
  }

  html[lang="ar"] .hero .brand-sub,
  html[lang="ar"] .page .hero .brand-sub{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    width:100% !important;
    min-height:54px !important;
    margin-top:4px !important;
    padding:10px 14px 10px 18px !important;
    border-radius:999px !important;
    border:1px solid rgba(178,135,58,.18) !important;
    background:linear-gradient(180deg, #f6e9a9 0%, #f1df8f 100%) !important;
    box-shadow:0 14px 22px rgba(7,34,31,.14) !important;
    color:#65452a !important;
    text-align:center !important;
    margin-inline:auto !important;
  }

  html[lang="ar"] .hero .brand-sub .coffee-trigger,
  html[lang="ar"] .page .hero .brand-sub .coffee-trigger{
    order:-1 !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    border-radius:14px !important;
    box-shadow:0 8px 14px rgba(117,76,38,.14) !important;
  }

  html[lang="ar"] .hero .brand-sub .coffee-text,
  html[lang="ar"] .hero .brand-sub .coffee-arrow,
  html[lang="ar"] .page .hero .brand-sub .coffee-text,
  html[lang="ar"] .page .hero .brand-sub .coffee-arrow{
    font-size:15px !important;
    font-weight:900 !important;
    line-height:1.15 !important;
    color:#65452a !important;
  }

  html[lang="ar"] .hero > .hero-actions,
  html[lang="ar"] .page .hero > .hero-actions{
    margin-top:12px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    align-items:stretch !important;
    border-top:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }

  html[lang="ar"] .hero > .hero-actions > *,
  html[lang="ar"] .page .hero > .hero-actions > *{
    width:100% !important;
    min-width:0 !important;
    margin-inline:auto !important;
  }

  html[lang="ar"] .hero > .hero-actions .collections-menu,
  html[lang="ar"] .page .hero > .hero-actions .collections-menu,
  html[lang="ar"] .hero > .hero-actions .mobile-language-picker,
  html[lang="ar"] .page .hero > .hero-actions .mobile-language-picker,
  html[lang="ar"] .hero > .hero-actions #openComposeBtn,
  html[lang="ar"] .page .hero > .hero-actions #openComposeBtn{
    max-width:none !important;
  }

  html[lang="ar"] .hero > .hero-actions #openComposeBtn,
  html[lang="ar"] .page .hero > .hero-actions #openComposeBtn{
    min-height:58px !important;
    padding:14px 18px !important;
    border-radius:20px !important;
    font-size:clamp(19px, 5.8vw, 24px) !important;
    line-height:1.15 !important;
    justify-content:center !important;
  }

  html[lang="ar"] .hero > .hero-actions .collections-menu summary,
  html[lang="ar"] .page .hero > .hero-actions .collections-menu summary,
  html[lang="ar"] .hero > .hero-actions .mobile-language-select,
  html[lang="ar"] .page .hero > .hero-actions .mobile-language-select{
    min-height:48px !important;
    border-radius:18px !important;
    display:block !important;
    padding:12px 48px !important;
    border:1px solid rgba(247,241,223,.12) !important;
    background:rgba(255,255,255,.055) !important;
    color:#fff4e5 !important;
    -webkit-text-fill-color:#fff4e5 !important;
    box-shadow:none !important;
    font-size:15px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    text-align:center !important;
  }

  html[lang="ar"] .hero > .hero-actions .collections-menu summary,
  html[lang="ar"] .page .hero > .hero-actions .collections-menu summary{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
  }

  html[lang="ar"] .hero > .hero-actions .mobile-language-picker,
  html[lang="ar"] .page .hero > .hero-actions .mobile-language-picker{
    position:relative !important;
    display:block !important;
    margin:0 !important;
    order:3 !important;
  }

  html[lang="ar"] .hero > .hero-actions .mobile-language-picker::before,
  html[lang="ar"] .page .hero > .hero-actions .mobile-language-picker::before{
    content:"🌐" !important;
    position:absolute !important;
    left:16px !important;
    right:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    font-size:19px !important;
    line-height:1 !important;
    pointer-events:none !important;
    z-index:2 !important;
  }

  html[lang="ar"] .hero > .hero-actions .mobile-language-picker::after,
  html[lang="ar"] .page .hero > .hero-actions .mobile-language-picker::after{
    content:"▾" !important;
    position:absolute !important;
    right:16px !important;
    left:auto !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    font-size:15px !important;
    line-height:1 !important;
    color:#fff4e5 !important;
    pointer-events:none !important;
    z-index:2 !important;
  }

  html[lang="ar"] .hero > .hero-actions .mobile-language-select,
  html[lang="ar"] .page .hero > .hero-actions .mobile-language-select{
    appearance:none !important;
    -webkit-appearance:none !important;
    background-image:none !important;
    cursor:pointer !important;
    direction:rtl !important;
    text-align:center !important;
    text-align-last:center !important;
  }

  html[lang="ar"] .hero > .hero-actions .mobile-language-select option,
  html[lang="ar"] .page .hero > .hero-actions .mobile-language-select option{
    color:#17322b !important;
    background:#fff9f3 !important;
  }
}

/* v2.2.1: Arabic mobile hero parity + language picker polish + note header cleanup */
@media (max-width: 760px){
  html[lang="ar"] .hero,
  html[lang="ar"] .page .hero{
    padding:18px 14px 14px !important;
    gap:10px !important;
  }

  html[lang="ar"] .hero .hero-kicker,
  html[lang="ar"] .page .hero .hero-kicker{
    margin:0 0 4px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    color:rgba(247, 202, 207, .95) !important;
    font-size:14px !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
  }

  html[lang="ar"] .hero .heading,
  html[lang="ar"] .page .hero .heading{
    gap:8px !important;
    margin-bottom:12px !important;
  }

  html[lang="ar"] .hero .heading h1,
  html[lang="ar"] .page .hero .heading h1{
    max-width:16ch !important;
    font-size:clamp(26px, 7.2vw, 34px) !important;
    line-height:1.05 !important;
    letter-spacing:-0.035em !important;
    white-space:normal !important;
    text-wrap:balance !important;
  }

  html[lang="ar"] .hero .heading h1::after,
  html[lang="ar"] .page .hero .heading h1::after{
    width:min(100%, 250px) !important;
    margin-top:8px !important;
  }

  html[lang="ar"] .hero .brand-logo,
  html[lang="ar"] .page .hero .brand-logo{
    padding:16px 14px !important;
    border-radius:24px !important;
  }

  html[lang="ar"] .hero .brand-mark,
  html[lang="ar"] .page .hero .brand-mark{
    width:88px !important;
    height:88px !important;
    margin:0 auto 12px !important;
  }

  html[lang="ar"] .hero .brand-kicker,
  html[lang="ar"] .page .hero .brand-kicker{
    font-size:13px !important;
  }

  html[lang="ar"] .hero .brand-title,
  html[lang="ar"] .page .hero .brand-title{
    font-size:clamp(17px, 5.2vw, 22px) !important;
    line-height:1.18 !important;
    gap:3px !important;
    max-width:15ch !important;
    margin-inline:auto !important;
  }

  html[lang="ar"] .hero .brand-sub,
  html[lang="ar"] .page .hero .brand-sub{
    width:min(100%, 430px) !important;
    min-height:52px !important;
    margin-top:8px !important;
    padding:10px 16px 10px 18px !important;
    gap:10px !important;
  }

  html[lang="ar"] .hero > .hero-actions,
  html[lang="ar"] .page .hero > .hero-actions{
    margin-top:10px !important;
    gap:10px !important;
  }

  html[lang="ar"] .hero > .hero-actions #openComposeBtn,
  html[lang="ar"] .hero > .hero-actions .collections-menu,
  html[lang="ar"] .hero > .hero-actions .mobile-language-picker,
  html[lang="ar"] .page .hero > .hero-actions #openComposeBtn,
  html[lang="ar"] .page .hero > .hero-actions .collections-menu,
  html[lang="ar"] .page .hero > .hero-actions .mobile-language-picker{
    width:100% !important;
    max-width:none !important;
  }

  html[lang="ar"] .hero > .hero-actions .mobile-language-picker,
  html[lang="ar"] .page .hero > .hero-actions .mobile-language-picker{
    order:3 !important;
  }

  html[lang="ar"] .hero > .hero-actions .mobile-language-select,
  html[lang="ar"] .page .hero > .hero-actions .mobile-language-select{
    min-height:52px !important;
    padding:12px 48px !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.055) !important;
    border:1px solid rgba(247,241,223,.12) !important;
    color:#fff4e5 !important;
    -webkit-text-fill-color:#fff4e5 !important;
    box-shadow:none !important;
    font-size:15px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    text-align:center !important;
    text-align-last:center !important;
    background-image:none !important;
  }

  html[lang="ar"] .hero > .hero-actions .mobile-language-picker::before,
  html[lang="ar"] .page .hero > .hero-actions .mobile-language-picker::before{
    left:16px !important;
    font-size:20px !important;
    color:#8fe3f0 !important;
  }

  html[lang="ar"] .hero > .hero-actions .mobile-language-picker::after,
  html[lang="ar"] .page .hero > .hero-actions .mobile-language-picker::after{
    right:16px !important;
    font-size:15px !important;
    color:#fff4e5 !important;
  }

  html[lang="ar"] .section-head,
  html[lang="ar"] .latest-section-head{
    margin-bottom:12px !important;
    gap:10px !important;
  }

  html[lang="ar"] .section-head h2,
  html[lang="ar"] .section-head h4,
  html[lang="ar"] .latest-head-row h4{
    font-size:clamp(22px, 8vw, 34px) !important;
    line-height:1.08 !important;
  }

  html[lang="ar"] .note-top{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:start !important;
    gap:10px !important;
    padding-right:0 !important;
    padding-left:0 !important;
  }

  html[lang="ar"] .identity{
    display:grid !important;
    grid-template-columns:46px minmax(0,1fr) !important;
    align-items:start !important;
    gap:10px !important;
    min-width:0 !important;
  }

  html[lang="ar"] .identity > div{
    min-width:0 !important;
  }

  html[lang="ar"] .note-top .badge{
    margin:0 !important;
    justify-self:end !important;
    align-self:start !important;
  }

  html[lang="ar"] .name{
    font-size:15px !important;
    line-height:1.1 !important;
  }

  html[lang="ar"] .meta{
    margin-top:4px !important;
    font-size:11px !important;
  }

  html[lang="ar"] .title{
    font-size:clamp(17px, 6.4vw, 24px) !important;
    line-height:1.16 !important;
  }

  html[lang="ar"] .reply-label,
  html[lang="ar"] .action-row{
    text-align:right !important;
    justify-content:flex-start !important;
  }
}

/* v2.2.1: fix folded corner direction on Arabic note cards */
@media (max-width: 760px){
  html[lang="ar"] .paper-fold,
  html[lang="ar"] .note .paper-fold{
    left: auto !important;
    right: 0 !important;
    transform: scale(.88) !important;
    transform-origin: bottom right !important;
    border-bottom-right-radius: 18px !important;
    border-bottom-left-radius: 0 !important;
  }
}


/* v79: fully hide skip-link off-screen on mobile so its rounded white edge never peeks into view */
@media (max-width: 760px){
  .skip-link{
    top:0 !important;
    transform:translateY(calc(-100% - 18px)) !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  .skip-link:focus,
  .skip-link:focus-visible{
    top:12px !important;
    transform:translateY(0) !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
}

/* v2.2 compose modal button fix: make Cancel/Post feeling full-width, readable, and stable on mobile */
#composeModal .modal-body > .helper-row:last-child{
  display:block !important;
}
#composeModal .draft-status{
  display:flex;
  width:100%;
  margin:0 0 10px;
}
#composeModal .modal-actions{
  width:100% !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:12px !important;
  justify-content:stretch !important;
  align-items:stretch !important;
}
#composeModal .modal-actions .btn,
#composeModal .modal-actions .secondary-btn,
#composeModal .modal-actions .btn.primary{
  width:100% !important;
  min-width:0 !important;
  min-height:56px !important;
  padding:0 18px !important;
  border-radius:20px !important;
  justify-content:center !important;
  align-items:center !important;
  white-space:nowrap !important;
  text-align:center !important;
  text-decoration:none !important;
  font-family:var(--font-display) !important;
  font-size:clamp(18px,4.7vw,22px) !important;
  line-height:1.05 !important;
  letter-spacing:-0.01em !important;
}
#composeModal .modal-actions .secondary-btn,
#composeModal .modal-actions .btn.secondary-btn{
  background:#fff7ea !important;
  color:#2f261f !important;
  border:2px solid rgba(210,184,123,.42) !important;
  box-shadow:0 10px 22px rgba(68,54,31,.10) !important;
}
#composeModal .modal-actions .btn.primary{
  background:linear-gradient(180deg,#ff9a8d,#ff7e70) !important;
  color:#fffaf6 !important;
  border:2px solid rgba(145,68,57,.20) !important;
  box-shadow:0 12px 24px rgba(165,79,68,.24) !important;
}
#composeModal .modal-actions .btn:active{
  transform:translateY(1px) !important;
}

@media (max-width:760px){
  #composeModal .modal-body > .helper-row:last-child{
    display:block !important;
  }
  #composeModal .draft-status{
    margin:0 0 12px !important;
  }
  #composeModal .modal-actions{
    width:100% !important;
    position:sticky !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:8 !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:10px !important;
    padding:14px 0 calc(10px + env(safe-area-inset-bottom)) !important;
    background:linear-gradient(180deg,rgba(247,239,205,0),rgba(247,239,205,.96) 32%,rgba(247,239,205,1) 58%) !important;
  }
  #composeModal .modal-actions .btn,
  #composeModal .modal-actions .secondary-btn,
  #composeModal .modal-actions .btn.primary{
    min-height:58px !important;
    border-radius:18px !important;
    font-size:clamp(17px,4.5vw,20px) !important;
    padding:0 14px !important;
  }
}

@media (max-width:420px){
  #composeModal .modal-actions{
    grid-template-columns:1fr !important;
  }
  #composeModal .modal-actions .btn,
  #composeModal .modal-actions .secondary-btn,
  #composeModal .modal-actions .btn.primary{
    min-height:54px !important;
    font-size:18px !important;
  }
}

.hero-intro {
  max-width: 58ch;
  margin: 0.75rem 0 0;
  color: rgba(30, 37, 34, 0.82);
  font-size: 1rem;
  line-height: 1.6;
}

.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.footer-links a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  text-decoration: underline;
}

.info-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #f4f1e8 0%, #eef6f2 100%);
  color: #1d2b28;
}

.info-shell {
  width: min(880px, calc(100vw - 2rem));
  margin: 0 auto;
  padding: 2rem 0 4rem;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.info-brand {
  font-weight: 800;
  font-size: 1.1rem;
  color: #0f4a43;
  text-decoration: none;
}

.info-card {
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(15,74,67,0.12);
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: 0 20px 50px rgba(15, 74, 67, 0.08);
}

.info-card + .info-card {
  margin-top: 1rem;
}

.info-card h1 {
  margin-top: 0;
}

.info-card h2 {
  margin-top: 1.5rem;
}

.info-card p, .info-card li {
  line-height: 1.7;
}

.info-card ul {
  padding-left: 1.25rem;
}

@media (max-width: 720px) {
  .footer-meta {
    align-items: flex-start;
  }

  .info-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* v80: remove rectangular background block behind compose modal action buttons on mobile */
#composeModal .modal-body > .helper-row:last-child,
#composeModal .modal-body > .helper-row:last-child::before,
#composeModal .modal-body > .helper-row:last-child::after{
  background:transparent !important;
  box-shadow:none !important;
}

@media (max-width:760px){
  #composeModal .modal-body > .helper-row:last-child{
    display:block !important;
    margin-top:2px !important;
    padding:0 !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    position:relative !important;
    z-index:1 !important;
  }

  #composeModal .modal-actions{
    position:sticky !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    padding:14px 0 calc(10px + env(safe-area-inset-bottom)) !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}

/* v80: remove rectangular background block behind compose modal action buttons on mobile */
#composeModal .modal-body > .helper-row:last-child,
#composeModal .modal-body > .helper-row:last-child::before,
#composeModal .modal-body > .helper-row:last-child::after{
  background:transparent !important;
  box-shadow:none !important;
}

@media (max-width:760px){
  #composeModal .modal-body > .helper-row:last-child{
    display:block !important;
    margin-top:2px !important;
    padding:0 !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    position:relative !important;
    z-index:1 !important;
  }

  #composeModal .modal-actions{
    position:sticky !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    padding:14px 0 calc(10px + env(safe-area-inset-bottom)) !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}


/* v61: free chat launcher + shared/public/private chat modal */
.chat-launch-btn{background:linear-gradient(180deg,#fffdfa,#fff5fb);color:#a44776;border-color:rgba(246,168,212,.92);box-shadow:0 10px 22px rgba(246,168,212,.20);display:inline-flex;align-items:center;gap:10px}
.chat-launch-btn:hover{box-shadow:0 14px 28px rgba(246,168,212,.28)}
.chat-launch-icon{width:28px;height:28px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(180deg,#ffd9ee,#ffc5e5);border:2px solid rgba(164,71,118,.16);font-size:15px;color:#7a2d57}
.chat-card{width:min(1160px,calc(100vw - 28px));max-height:min(92vh,960px)}
.chat-modal-head{background:linear-gradient(180deg,#ffe2f1,#ffd3ec)}
.chat-modal-body{padding:18px}.chat-shell{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;min-height:64vh}.chat-sidebar{display:flex;flex-direction:column;gap:14px;min-width:0}
.chat-profile-card,.chat-sidebar-block,.chat-room-banner,.chat-composer{border:2px solid rgba(92,69,39,.14);background:linear-gradient(180deg,#fffdf9,#fff5ee);border-radius:22px;box-shadow:0 10px 22px rgba(74,52,28,.06)}
.chat-profile-card,.chat-sidebar-block{padding:14px}.chat-profile-row{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.chat-profile-avatar{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(180deg,#ffe4f3,#ffd2eb);border:2px solid rgba(164,71,118,.16);font-size:22px;flex:0 0 auto}
.chat-profile-title,.chat-room-title{font-weight:900;color:#2f261f}.chat-profile-copy,.chat-room-copy,.chat-empty-copy{font-size:12px;line-height:1.6;color:#665447;font-weight:700}
.chat-profile-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.chat-small-btn{padding:9px 12px;font-size:12px}.chat-sidebar-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.chat-count-pill{min-width:28px;padding:4px 9px;border-radius:999px;background:#ffe5f2;border:2px solid rgba(164,71,118,.14);font-size:12px;font-weight:900;text-align:center;color:#7a2d57}
.chat-mini-list{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow:auto;padding-right:2px}.chat-list-item,.chat-request-card{width:100%;text-align:left;border:2px solid rgba(92,69,39,.12);background:#fff;border-radius:18px;padding:11px 12px;box-shadow:0 4px 10px rgba(74,52,28,.05)}
.chat-list-item{cursor:pointer;font-weight:800;color:#36281e}.chat-list-item.is-active{border-color:rgba(246,168,212,.88);background:linear-gradient(180deg,#fff7fc,#fff0f9)}.chat-list-item strong{display:block}.chat-list-item span{display:block;font-size:12px;line-height:1.55;color:#6e5a4a;font-weight:700}
.chat-request-card{display:flex;flex-direction:column;gap:10px}.chat-request-meta{font-size:13px;font-weight:900;color:#2f261f}.chat-request-copy{font-size:12px;line-height:1.6;color:#665447;font-weight:700}.chat-request-actions{display:flex;gap:8px;flex-wrap:wrap}
.chat-main{display:flex;flex-direction:column;gap:14px;min-width:0}.chat-room-banner{padding:16px 18px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;background:linear-gradient(180deg,#fff4df,#ffeccf)}.chat-room-kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9a755d;font-weight:900;margin-bottom:5px}
.chat-message-list{flex:1;min-height:320px;max-height:calc(92vh - 350px);overflow:auto;padding:4px 2px 4px 0;display:flex;flex-direction:column;gap:10px}
.chat-bubble{align-self:flex-start;max-width:min(86%,620px);padding:12px 14px;border-radius:20px;border:2px solid rgba(92,69,39,.12);background:#fff;box-shadow:0 6px 12px rgba(74,52,28,.05)}
.chat-bubble.is-self{align-self:flex-end;background:linear-gradient(180deg,#ffe7f4,#ffd4ea);border-color:rgba(246,168,212,.85)}.chat-bubble-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px;font-weight:900;color:#5b4a3d}.chat-bubble-avatar{font-size:18px;line-height:1}.chat-bubble-time{margin-left:auto;font-size:11px;color:#8a7768}.chat-bubble-text{font-size:14px;line-height:1.7;color:#2f261f;white-space:pre-wrap;word-break:break-word;font-weight:700}
.chat-composer{padding:14px}.chat-message-input{min-height:108px;height:108px}.chat-modal-actions{justify-content:flex-end}
@media (max-width:940px){.chat-shell{grid-template-columns:1fr}.chat-message-list{max-height:none;min-height:260px}}
@media (max-width:760px){.chat-card{width:100%;max-height:94vh;border-radius:28px 28px 0 0}.chat-modal-body{padding:14px}.chat-shell{gap:12px;min-height:auto}.chat-sidebar{order:2}.chat-main{order:1}.chat-room-banner{flex-direction:column}.chat-profile-actions,.chat-request-actions,.chat-modal-actions{display:grid;grid-template-columns:1fr 1fr}}


/* v62: make Free chat launcher match Start writing a feeling with a pink outline */
.hero-actions #openChatBtn,
.hero-actions .chat-launch-btn{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:10px 20px !important;
  border:4px solid #f6a8d4 !important;
  border-radius:999px !important;
  background:transparent !important;
  color:#f7bfd8 !important;
  box-shadow:0 8px 22px rgba(18,73,66,.12) !important;
  text-decoration:none !important;
  font-size:18px !important;
  font-weight:900 !important;
  letter-spacing:.01em !important;
  line-height:1.12 !important;
  text-shadow:0 1px 0 rgba(17,60,55,.18) !important;
  transform:translateY(-1px) !important;
}
.hero-actions #openChatBtn::before,
.hero-actions .chat-launch-btn::before{
  content:none !important;
  display:none !important;
}
.hero-actions #openChatBtn::after,
.hero-actions .chat-launch-btn::after{
  content:"live";
  position:absolute;
  top:-10px;
  right:12px;
  padding:2px 8px;
  border-radius:999px;
  background:#ffd9ee;
  color:#8d436c;
  border:2px solid rgba(164,71,118,.24);
  font-family:Inter, system-ui, sans-serif;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 3px 8px rgba(116,84,44,.14);
}
.hero-actions #openChatBtn:hover,
.hero-actions .chat-launch-btn:hover{
  transform:translateY(-2px) scale(1.01) !important;
  box-shadow:0 12px 26px rgba(18,73,66,.16) !important;
}
.hero-actions #openChatBtn:focus-visible,
.hero-actions .chat-launch-btn:focus-visible{
  outline:3px solid rgba(255,214,239,.95) !important;
  outline-offset:4px !important;
}
@media (max-width: 980px){
  .hero-actions #openChatBtn,
  .hero-actions .chat-launch-btn{
    font-size:16px !important;
    padding:9px 16px !important;
  }
  .hero-actions #openChatBtn::after,
  .hero-actions .chat-launch-btn::after{
    right:9px;
    top:-8px;
  }
}

/* v63: clickable names inside chat bubbles for private-chat requests */
.chat-bubble-head{
  display:flex;
  align-items:center;
  gap:8px;
}
.chat-name-btn{
  appearance:none;
  border:none;
  background:transparent;
  padding:0;
  margin:0;
  font:inherit;
  color:inherit;
  font-weight:800;
  cursor:pointer;
}
.chat-name-btn:hover:not(:disabled){
  text-decoration:underline;
}
.chat-name-btn:disabled{
  cursor:default;
  opacity:1;
}

/* v64: keep chat popup inside viewport without showing an outer modal scrollbar */
#chatModal{
  overflow:hidden;
}
#chatModal .chat-card{
  width:min(1160px,calc(100vw - 28px));
  height:min(92vh,960px);
  max-height:min(92vh,960px);
  overflow:hidden !important;
  display:flex;
  flex-direction:column;
}
#chatModal .chat-modal-body{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
#chatModal .chat-shell{
  height:100%;
  min-height:0;
  align-items:stretch;
}
#chatModal .chat-sidebar,
#chatModal .chat-main{
  min-height:0;
}
#chatModal .chat-sidebar{
  overflow:auto;
  padding-right:4px;
}
#chatModal .chat-main{
  overflow:hidden;
}
#chatModal .chat-message-list,
#chatModal .chat-mini-list,
#chatModal .chat-sidebar{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
#chatModal .chat-message-list::-webkit-scrollbar,
#chatModal .chat-mini-list::-webkit-scrollbar,
#chatModal .chat-sidebar::-webkit-scrollbar{
  width:0;
  height:0;
}
@media (max-width:940px){
  #chatModal .chat-card{
    height:min(92vh,960px);
  }
  #chatModal .chat-modal-body{
    overflow:auto;
  }
  #chatModal .chat-shell{
    height:auto;
  }
  #chatModal .chat-sidebar{
    overflow:visible;
    padding-right:0;
  }
}
@media (max-width:760px){
  #chatModal .chat-card{
    width:100%;
    height:94vh;
    max-height:94vh;
  }
  #chatModal .chat-modal-body{
    overflow:auto;
  }
}

/* v65: unify chat composer corner radius */
#chatModal .chat-composer{
  border-radius:24px;
  overflow:hidden;
}
#chatModal .chat-message-input{
  border-radius:24px;
}


/* v66: make Free chat feel like talking directly on the board with pinned post-it notes */
#chatModal .chat-card{
  background:
    radial-gradient(circle at 16% 10%, rgba(255,255,255,.08), transparent 19%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.05), transparent 20%),
    linear-gradient(115deg, rgba(255,255,255,.025) 0 1px, transparent 1px 16px),
    radial-gradient(rgba(255,255,255,.08) .9px, transparent 1px),
    linear-gradient(180deg,#173f36,#0f332d) !important;
  background-size:auto, auto, 34px 34px, 18px 18px, auto !important;
  color:#fff8dc !important;
  border:18px solid #c8872e !important;
  border-radius:8px !important;
  box-shadow:
    inset 0 0 0 4px rgba(255,226,137,.45),
    inset 0 0 52px rgba(0,0,0,.35),
    0 18px 44px rgba(59,39,20,.25) !important;
  transform:translateY(0) rotate(0deg) scale(1) !important;
}
#chatModal .chat-card::before{
  content:"" !important;
  position:absolute !important;
  inset:-18px !important;
  width:auto !important;
  height:auto !important;
  top:auto !important;
  left:auto !important;
  transform:none !important;
  border:none !important;
  border-radius:8px !important;
  background:
    linear-gradient(90deg,rgba(255,226,118,.48),transparent 18%,rgba(80,38,11,.18) 52%,transparent 80%,rgba(255,226,118,.35)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 2px,transparent 2px 18px) !important;
  mix-blend-mode:multiply !important;
  opacity:.38 !important;
  box-shadow:none !important;
  pointer-events:none !important;
  z-index:0 !important;
}
#chatModal .chat-card::after{
  display:none !important;
}
#chatModal .chat-modal-head{
  background:transparent !important;
  border-bottom:2px dashed rgba(255,248,220,.24) !important;
  color:#fff8dc !important;
  padding:22px 24px 16px !important;
}
#chatModal .chat-modal-titlewrap{
  min-width:0;
}
#chatModal .chat-modal-titleline{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
#chatModal .chat-modal-titleline .modal-kicker{
  margin-bottom:0 !important;
  line-height:1;
}
#chatModal .chat-modal-titleline h3{
  margin:0 !important;
  line-height:1.05;
}
#chatModal .modal-kicker,
#chatModal .chat-room-kicker{
  color:#f5b0ad !important;
  opacity:1 !important;
  text-shadow:0 2px 0 rgba(0,0,0,.22) !important;
  letter-spacing:.18em !important;
  font-family:"Comic Sans MS","Comic Neue","Noto Sans Thai",system-ui,sans-serif !important;
}
#chatModal .chat-modal-head h3,
#chatModal .chat-room-title,
#chatModal .chat-profile-title,
#chatModal .chat-sidebar-head strong{
  color:#fff8dc !important;
  text-shadow:0 2px 0 rgba(0,0,0,.18) !important;
  font-family:"Comic Sans MS","Comic Neue","Noto Sans Thai",system-ui,sans-serif !important;
  font-weight:800 !important;
}
#chatModal .icon-close{
  background:#fff8dc !important;
  color:#1f342d !important;
  border:2px solid rgba(255,248,220,.55) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
}
#chatModal .chat-modal-body{
  padding:20px !important;
}
#chatModal .chat-shell{
  gap:18px !important;
}
#chatModal .chat-sidebar,
#chatModal .chat-main{
  position:relative;
}
#chatModal .chat-main{
  gap:16px !important;
}
#chatModal .chat-profile-card,
#chatModal .chat-sidebar-block,
#chatModal .chat-room-banner,
#chatModal .chat-composer{
  position:relative !important;
  overflow:visible !important;
  border:1px solid rgba(108,84,50,.10) !important;
  border-radius:24px !important;
  box-shadow:0 16px 24px rgba(9,23,20,.12) !important;
  color:#2f261f !important;
}
#chatModal .chat-profile-card::before,
#chatModal .chat-sidebar-block::before,
#chatModal .chat-room-banner::before,
#chatModal .chat-composer::before{
  content:"";
  position:absolute;
  top:-10px;
  left:20px;
  width:58px;
  height:20px;
  border-radius:7px;
  background:rgba(255,248,205,.82);
  border:2px solid rgba(111,83,47,.12);
  box-shadow:0 6px 12px rgba(74,52,28,.08);
  transform:rotate(-4deg);
}
#chatModal .chat-profile-card::after,
#chatModal .chat-sidebar-block::after,
#chatModal .chat-room-banner::after,
#chatModal .chat-composer::after,
#chatModal .chat-bubble::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:44px;
  height:44px;
  clip-path:polygon(100% 0,0 100%,100% 100%);
  background:linear-gradient(135deg,transparent 0 48%,rgba(80,55,34,.10) 49% 60%,rgba(255,255,255,.58) 61% 100%);
  border-bottom-right-radius:22px;
  pointer-events:none;
}
#chatModal .chat-profile-card{
  background:#f7ddd3 !important;
  transform:rotate(-1.1deg);
}
#chatModal .chat-sidebar .chat-sidebar-block:nth-of-type(1){
  background:#f6e7aa !important;
  transform:rotate(.7deg);
}
#chatModal .chat-sidebar .chat-sidebar-block:nth-of-type(2){
  background:#e4f0ea !important;
  transform:rotate(-.9deg);
}
#chatModal .chat-sidebar .chat-sidebar-block:nth-of-type(3){
  background:#cdeeff !important;
  transform:rotate(.85deg);
}
#chatModal .chat-room-banner{
  background:#fbefcf !important;
  transform:rotate(-.45deg);
  padding:18px 20px !important;
}
#chatModal .chat-composer{
  background:#fffdf8 !important;
  transform:rotate(.25deg);
  padding:16px !important;
}
#chatModal .chat-profile-copy,
#chatModal .chat-room-copy,
#chatModal .chat-empty-copy,
#chatModal .composer-helper,
#chatModal .chat-request-copy,
#chatModal .chat-list-item span,
#chatModal .chat-bubble-time{
  color:#6a5546 !important;
  text-shadow:none !important;
}
#chatModal .chat-profile-avatar,
#chatModal .chat-count-pill{
  background:#fff8dc !important;
  color:#7a2d57 !important;
  border:2px solid rgba(92,69,39,.14) !important;
  box-shadow:0 8px 14px rgba(74,52,28,.08) !important;
}
#chatModal .chat-alias-input,
#chatModal .chat-message-input,
#chatModal .chat-request-card,
#chatModal .chat-list-item{
  background:rgba(255,253,248,.88) !important;
  color:#2f261f !important;
  border:2px solid rgba(92,69,39,.16) !important;
  box-shadow:0 8px 18px rgba(74,52,28,.07) !important;
}
#chatModal .chat-alias-input::placeholder,
#chatModal .chat-message-input::placeholder{
  color:rgba(33,28,24,.52) !important;
}
#chatModal .chat-message-list{
  position:relative;
  padding:8px 10px 12px 4px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
#chatModal .chat-message-list::before{
  content:"";
  position:absolute;
  inset:4px 2px 4px 0;
  border:2px dashed rgba(255,248,220,.18);
  border-radius:24px;
  pointer-events:none;
}
#chatModal .chat-bubble{
  position:relative !important;
  max-width:min(80%, 520px) !important;
  padding:14px 15px 14px 15px !important;
  border-radius:24px !important;
  border:1px solid rgba(108,84,50,.10) !important;
  box-shadow:0 16px 24px rgba(9,23,20,.12) !important;
  color:#2f261f !important;
}
#chatModal .chat-bubble::before{
  content:"";
  position:absolute;
  top:-9px;
  left:18px;
  width:52px;
  height:18px;
  border-radius:7px;
  background:rgba(255,248,205,.8);
  border:2px solid rgba(111,83,47,.10);
  box-shadow:0 5px 10px rgba(74,52,28,.07);
  transform:rotate(-5deg);
}
#chatModal .chat-bubble:nth-child(5n+1){background:#f6e7aa !important; transform:rotate(-.9deg);}
#chatModal .chat-bubble:nth-child(5n+2){background:#f7ddd3 !important; transform:rotate(.75deg);}
#chatModal .chat-bubble:nth-child(5n+3){background:#e4f0ea !important; transform:rotate(-.55deg);}
#chatModal .chat-bubble:nth-child(5n+4){background:#cdeeff !important; transform:rotate(.85deg);}
#chatModal .chat-bubble:nth-child(5n+5){background:#fbefcf !important; transform:rotate(-.35deg);}
#chatModal .chat-bubble.is-self{
  background:#ffd8e8 !important;
  border-color:rgba(164,71,118,.24) !important;
  transform:rotate(.8deg) !important;
}
#chatModal .chat-bubble.is-self::before{
  left:auto;
  right:18px;
  transform:rotate(5deg);
}
#chatModal .chat-bubble-head,
#chatModal .chat-bubble-text,
#chatModal .chat-request-meta,
#chatModal .chat-list-item strong,
#chatModal .chat-name-btn{
  color:#2f261f !important;
}
#chatModal .chat-name-btn:hover:not(:disabled){
  color:#8d436c !important;
}
#chatModal .chat-mini-list{
  gap:10px !important;
}
#chatModal .chat-list-item.is-active{
  border-color:rgba(246,168,212,.88) !important;
  background:linear-gradient(180deg,#fff7fc,#fff0f9) !important;
}
#chatModal .chat-request-actions .btn,
#chatModal .chat-profile-actions .btn,
#chatModal .chat-modal-actions .btn{
  min-height:48px;
}
#chatModal .chat-profile-actions .btn,
#chatModal .chat-request-actions .secondary-btn,
#chatModal .chat-modal-actions .secondary-btn{
  background:#fffdf8 !important;
  color:#2f261f !important;
  border-color:rgba(92,69,39,.17) !important;
}
#chatModal .chat-request-actions .primary,
#chatModal .chat-modal-actions .primary{
  background:#ff7168 !important;
  color:#fff !important;
  border-color:rgba(127,55,48,.35) !important;
  box-shadow:0 12px 24px rgba(255,111,97,.20) !important;
}
#chatModal .chat-modal-actions{
  margin-top:10px;
}
#chatModal .char-counter{
  color:#8c6245 !important;
}
@media (max-width:940px){
  #chatModal .chat-profile-card,
  #chatModal .chat-sidebar-block,
  #chatModal .chat-room-banner,
  #chatModal .chat-composer,
  #chatModal .chat-bubble{
    transform:none !important;
  }
  #chatModal .chat-message-list::before{
    inset:0;
  }
}
@media (max-width:760px){
  #chatModal .chat-card{
    border-width:8px !important;
    border-radius:0 !important;
  }
  #chatModal .chat-modal-body{
    padding:14px !important;
  }
  #chatModal .chat-room-banner,
  #chatModal .chat-composer,
  #chatModal .chat-profile-card,
  #chatModal .chat-sidebar-block{
    border-radius:22px !important;
  }
  #chatModal .chat-modal-actions,
  #chatModal .chat-profile-actions,
  #chatModal .chat-request-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
  }
  #chatModal .chat-bubble{
    max-width:92% !important;
  }
}


/* v67: keep note text inside chat cards readable on the sticky-note surfaces */
#chatModal .chat-profile-title,
#chatModal .chat-room-title,
#chatModal .chat-sidebar-head strong,
#chatModal .chat-request-meta,
#chatModal .chat-list-item strong,
#chatModal .chat-bubble-head,
#chatModal .chat-bubble-text,
#chatModal .chat-name-btn{
  color:#2f261f !important;
  text-shadow:none !important;
  font-family:"Noto Sans Thai","Inter",system-ui,sans-serif !important;
}
#chatModal .chat-room-kicker{
  color:#8c6245 !important;
  text-shadow:none !important;
  font-family:"Noto Sans Thai","Inter",system-ui,sans-serif !important;
  letter-spacing:.14em !important;
}


/* v69: keep chat send controls unmistakably visible and submit from a real form */
#chatModal .chat-composer-form{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  min-height:0 !important;
}
#chatModal .chat-main{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
}
#chatModal .chat-message-list{
  flex:1 1 auto !important;
  min-height:160px !important;
}
#chatModal .chat-composer{
  position:sticky !important;
  bottom:0 !important;
  z-index:6 !important;
  margin-top:auto !important;
}
#chatModal .chat-modal-actions{
  order:2 !important;
  position:sticky !important;
  bottom:0 !important;
  z-index:7 !important;
  padding-top:2px !important;
}
#chatModal .chat-composer-helper-row{
  order:3 !important;
}
#chatModal .chat-send-primary{
  min-width:168px !important;
  font-weight:900 !important;
}
@media (max-width:760px){
  #chatModal .chat-composer{
    padding:14px 14px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #chatModal .chat-modal-actions{
    grid-template-columns:1fr 1.18fr !important;
  }
  #chatModal .chat-send-primary{
    min-width:0 !important;
  }
}


/* v70: align chat helper text, counter, and actions in one footer row */
#chatModal .chat-room-heading-inline{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}
#chatModal .chat-room-heading-inline .chat-room-kicker{
  margin-bottom:0 !important;
}
#chatModal .chat-room-heading-inline .chat-room-title{
  margin:0 !important;
}
#chatModal .chat-composer-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
#chatModal .chat-composer-helper-row{
  order:1 !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex:1 1 280px;
  min-width:0;
}
#chatModal .chat-composer-helper-row .composer-helper{
  flex:1 1 auto;
  min-width:180px;
}
#chatModal .chat-composer-helper-row .char-counter{
  flex:0 0 auto;
  white-space:nowrap;
}
#chatModal .chat-modal-actions{
  order:2 !important;
  margin-top:0 !important;
  padding-top:0 !important;
  position:static !important;
  bottom:auto !important;
  z-index:auto !important;
  flex:0 0 auto;
}
@media (max-width:760px){
  #chatModal .chat-composer-helper-row{
    justify-content:flex-start !important;
  }
  #chatModal .chat-modal-actions{
    width:auto;
    min-width:min(100%, 220px);
  }
}

/* v71: show chat messages as plain text on the board, not as sticky notes */
#chatModal .chat-message-list{
  gap:12px !important;
  padding:8px 6px 12px 0 !important;
}
#chatModal .chat-bubble{
  position:relative !important;
  max-width:100% !important;
  width:100% !important;
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  transform:none !important;
}
#chatModal .chat-bubble::before,
#chatModal .chat-bubble::after{
  content:none !important;
  display:none !important;
}
#chatModal .chat-bubble-head{
  margin-bottom:4px !important;
  gap:8px !important;
  color:rgba(255,248,220,.86) !important;
}
#chatModal .chat-bubble-avatar{
  display:none !important;
}
#chatModal .chat-name-btn{
  color:#fff8dc !important;
  font-size:13px !important;
  font-weight:900 !important;
}
#chatModal .chat-bubble-time{
  color:rgba(255,248,220,.72) !important;
  font-size:11px !important;
}
#chatModal .chat-bubble-text{
  color:#fffdf6 !important;
  font-size:16px !important;
  line-height:1.65 !important;
  font-weight:700 !important;
  text-shadow:0 1px 0 rgba(0,0,0,.16) !important;
}
#chatModal .chat-bubble.is-self{
  align-self:flex-end !important;
  text-align:right !important;
}
#chatModal .chat-bubble.is-self .chat-bubble-head{
  justify-content:flex-end !important;
}
#chatModal .chat-bubble.is-self .chat-name-btn,
#chatModal .chat-bubble.is-self .chat-bubble-time,
#chatModal .chat-bubble.is-self .chat-bubble-text{
  color:#fff8dc !important;
}


/* v72: force chat messages to render as plain board text with no colored bars */
#chatModal .chat-message-list{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  padding:8px 8px 12px 0 !important;
}
#chatModal .chat-bubble,
#chatModal .chat-bubble.is-self{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  align-self:stretch !important;
  text-align:left !important;
  position:relative !important;
  padding:0 !important;
  margin:0 !important;
  background:none !important;
  background-color:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
}
#chatModal .chat-bubble::before,
#chatModal .chat-bubble::after,
#chatModal .chat-bubble.is-self::before,
#chatModal .chat-bubble.is-self::after{
  content:none !important;
  display:none !important;
}
#chatModal .chat-bubble-head,
#chatModal .chat-bubble.is-self .chat-bubble-head{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  margin:0 0 3px 0 !important;
  padding:0 !important;
  background:none !important;
  color:rgba(255,248,220,.78) !important;
}
#chatModal .chat-bubble-avatar{display:none !important;}
#chatModal .chat-name-btn,
#chatModal .chat-bubble.is-self .chat-name-btn{
  color:#fff3c7 !important;
  font-size:13px !important;
  font-weight:800 !important;
  text-shadow:none !important;
}
#chatModal .chat-bubble-time,
#chatModal .chat-bubble.is-self .chat-bubble-time{
  margin-left:0 !important;
  color:rgba(255,248,220,.56) !important;
  font-size:11px !important;
}
#chatModal .chat-bubble-text,
#chatModal .chat-bubble.is-self .chat-bubble-text{
  display:block !important;
  width:auto !important;
  padding:0 !important;
  margin:0 !important;
  background:none !important;
  background-color:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:#fffdf2 !important;
  font-size:16px !important;
  line-height:1.65 !important;
  font-weight:700 !important;
  text-align:left !important;
  text-shadow:0 1px 0 rgba(0,0,0,.18) !important;
}


/* v67: simpler free chat entry flow with presence list */
#chatModal .chat-intro-view[hidden],
#chatModal .chat-shell[hidden]{display:none !important;}

.chat-intro-view{display:grid;place-items:center;min-height:min(62vh,640px);padding:10px}
.chat-intro-card{width:min(460px,100%);padding:26px 24px;border:2px solid rgba(92,69,39,.14);background:linear-gradient(180deg,#fffdf9,#fff5ee);border-radius:28px;box-shadow:0 12px 28px rgba(74,52,28,.08);display:flex;flex-direction:column;gap:14px;align-items:stretch;text-align:center}
.chat-intro-avatar{width:72px;height:72px;border-radius:24px;display:grid;place-items:center;margin:0 auto;background:linear-gradient(180deg,#ffe4f3,#ffd2eb);border:2px solid rgba(164,71,118,.16);font-size:34px}
.chat-intro-title{font-size:24px;line-height:1.2;font-weight:900;color:#2f261f}
.chat-intro-copy{font-size:14px;line-height:1.7;color:#665447;font-weight:700}
.chat-intro-actions{justify-content:center;gap:10px;flex-wrap:wrap}
.chat-sidebar-alias{font-size:13px;line-height:1.6;color:#665447;font-weight:800}
.chat-room-heading-inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chat-user-meta{display:flex;align-items:center;gap:8px}
.chat-user-self-tag{display:inline-flex;align-items:center;justify-content:center;min-width:42px;padding:3px 8px;border-radius:999px;background:#ffe5f2;border:2px solid rgba(164,71,118,.14);font-size:11px;font-weight:900;color:#7a2d57}
.chat-list-item.is-presence{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.chat-list-item.is-presence strong,.chat-list-item.is-presence span{display:block}
.chat-list-item.is-presence[disabled]{cursor:default;opacity:1}
@media (max-width:760px){.chat-intro-card{padding:22px 18px}.chat-intro-actions{display:grid;grid-template-columns:1fr}.chat-list-item.is-presence{flex-direction:column;align-items:flex-start}}

#chatIntroView[hidden],
#chatWorkspaceView[hidden]{display:none !important;}

/* v68: simplify in-room alias editing */
.chat-alias-editor[hidden]{display:none !important;}
.chat-alias-editor{display:grid;gap:10px;margin-top:12px}


/* chat redesign v8: only people list in sidebar */
#chatModal .chat-shell{grid-template-columns:260px minmax(0,1fr);}
#chatModal .chat-sidebar{align-self:start;}
#chatModal .chat-sidebar-people-only{background:#e4f0ea !important;transform:rotate(-.6deg);min-height:220px;}
#chatModal .chat-room-banner-actions{display:flex;justify-content:flex-end;align-items:center;}
@media (max-width:760px){#chatModal .chat-shell{grid-template-columns:1fr;} #chatModal .chat-room-banner-actions{width:100%;justify-content:flex-start;}}

/* chat redesign v9: board layout with clean dividers, no post-it cards */
#chatModal .chat-shell{
  grid-template-columns:280px minmax(0,1fr) !important;
  gap:0 !important;
  align-items:start;
}
#chatModal .chat-sidebar,
#chatModal .chat-main{
  min-width:0;
}
#chatModal .chat-sidebar{
  padding:10px 24px 10px 8px !important;
  border-right:1px solid rgba(255,248,220,.24) !important;
}
#chatModal .chat-main{
  padding:10px 0 0 24px !important;
}
#chatModal .chat-sidebar-block,
#chatModal .chat-room-banner,
#chatModal .chat-composer,
#chatModal .chat-list-item,
#chatModal .chat-count-pill{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  transform:none !important;
}
#chatModal .chat-sidebar-block::before,
#chatModal .chat-sidebar-block::after,
#chatModal .chat-room-banner::before,
#chatModal .chat-room-banner::after,
#chatModal .chat-composer::before,
#chatModal .chat-composer::after,
#chatModal .chat-list-item::before,
#chatModal .chat-list-item::after{
  content:none !important;
  display:none !important;
}
#chatModal .chat-sidebar-people-only{
  min-height:0 !important;
  padding:0 !important;
}
#chatModal .chat-sidebar-head{
  margin:0 0 14px !important;
  padding:0 0 12px !important;
  border-bottom:1px solid rgba(255,248,220,.24) !important;
}
#chatModal .chat-sidebar-head strong,
#chatModal .chat-room-title,
#chatModal .chat-room-kicker{
  color:#fff8dc !important;
}
#chatModal .chat-count-pill{
  min-width:auto !important;
  padding:0 !important;
  color:#fff8dc !important;
  font-size:15px !important;
  font-weight:900 !important;
}
#chatModal .chat-mini-list{
  gap:0 !important;
  max-height:none !important;
  padding-right:0 !important;
}
#chatModal .chat-list-item,
#chatModal .chat-list-item.is-presence{
  display:block !important;
  width:100% !important;
  padding:10px 0 !important;
  margin:0 !important;
  text-align:left !important;
  border-bottom:1px solid rgba(255,248,220,.14) !important;
}
#chatModal .chat-list-item:last-child{
  border-bottom:none !important;
}
#chatModal .chat-list-item strong,
#chatModal .chat-list-item span,
#chatModal .chat-empty-copy,
#chatModal .chat-room-copy,
#chatModal .composer-helper,
#chatModal .char-counter{
  color:#fffdf2 !important;
}
#chatModal .chat-list-item strong{
  font-size:17px !important;
  font-weight:900 !important;
}
#chatModal .chat-list-item span{
  font-size:13px !important;
  line-height:1.65 !important;
  margin-top:2px !important;
  opacity:.85;
}
#chatModal .chat-list-item.is-presence .chat-user-meta{
  justify-content:space-between !important;
  width:100% !important;
  margin-bottom:4px !important;
}
#chatModal .chat-user-self-tag{
  background:transparent !important;
  border:1px solid rgba(255,190,220,.45) !important;
  color:#ffd7eb !important;
}
#chatModal .chat-list-item:hover:not([disabled]),
#chatModal .chat-list-item:focus-visible{
  background:rgba(255,248,220,.05) !important;
}
#chatModal .chat-room-banner{
  padding:0 0 14px !important;
  margin:0 0 14px !important;
  border-bottom:1px solid rgba(255,248,220,.24) !important;
}
#chatModal .chat-room-banner-actions{
  padding-top:6px;
}
#chatModal .chat-message-list{
  padding:0 0 14px !important;
  margin:0 0 14px !important;
  min-height:320px;
  border-bottom:1px solid rgba(255,248,220,.18) !important;
}
#chatModal .chat-message-list::before{
  content:none !important;
  display:none !important;
}
#chatModal .chat-composer{
  padding:0 !important;
}
#chatModal .chat-message-input{
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(255,248,220,.24) !important;
  box-shadow:none !important;
  border-radius:18px !important;
}
#chatModal .chat-composer-footer{
  padding-top:12px !important;
}
#chatModal .chat-bubble{
  padding:0 0 12px !important;
  margin:0 0 12px !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  transform:none !important;
  border-radius:0 !important;
  max-width:100% !important;
}
#chatModal .chat-bubble::before,
#chatModal .chat-bubble::after{
  content:none !important;
  display:none !important;
}
#chatModal .chat-bubble + .chat-bubble{
  border-top:1px solid rgba(255,248,220,.08);
  padding-top:12px !important;
}
#chatModal .chat-bubble-head,
#chatModal .chat-bubble.is-self .chat-bubble-head,
#chatModal .chat-bubble-text,
#chatModal .chat-bubble.is-self .chat-bubble-text,
#chatModal .chat-bubble-time,
#chatModal .chat-bubble.is-self .chat-bubble-time{
  color:#fffdf2 !important;
  text-shadow:none !important;
}
#chatModal .chat-bubble-head{
  gap:8px !important;
}
#chatModal .chat-bubble-time{
  opacity:.72;
}
#chatModal .chat-bubble.is-self{
  padding-left:0 !important;
}
@media (max-width:760px){
  #chatModal .chat-shell{grid-template-columns:1fr !important;}
  #chatModal .chat-sidebar{border-right:none !important;padding:0 0 14px !important;border-bottom:1px solid rgba(255,248,220,.24) !important;margin-bottom:14px !important;}
  #chatModal .chat-main{padding:0 !important;}
}

/* chat redesign v10: fully text-first sidebar, lighter board styling */
#chatModal .chat-sidebar-people-only,
#chatModal .chat-sidebar-block.chat-sidebar-people-only{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  transform:none !important;
}
#chatModal .chat-sidebar-people-only::before,
#chatModal .chat-sidebar-people-only::after{
  content:none !important;
  display:none !important;
}
#chatModal .chat-sidebar{
  padding:6px 28px 6px 0 !important;
}
#chatModal .chat-sidebar-head{
  padding:0 0 14px !important;
  margin:0 0 10px !important;
}
#chatModal .chat-count-pill{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  min-width:0 !important;
}
#chatModal .chat-list-item,
#chatModal .chat-list-item.is-presence,
#chatModal .chat-list-item.is-active,
#chatModal .chat-list-item:hover,
#chatModal .chat-list-item:focus-visible{
  background:none !important;
  box-shadow:none !important;
  border-left:none !important;
  border-right:none !important;
  border-top:none !important;
  border-radius:0 !important;
}
#chatModal .chat-list-item.is-presence{
  padding:12px 0 !important;
}
#chatModal .chat-list-item strong{
  color:#fff7e7 !important;
}
#chatModal .chat-list-item span{
  color:rgba(255,247,231,.82) !important;
}
#chatModal .chat-user-self-tag{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  min-width:0 !important;
  color:#ffd2e6 !important;
  font-size:12px !important;
}
#chatModal .chat-room-banner{
  padding:0 0 16px !important;
  margin:0 0 18px !important;
}
#chatModal .chat-room-heading-inline{
  margin-bottom:4px !important;
}
#chatModal .chat-room-copy{
  opacity:.92;
}
#chatModal .chat-message-list{
  min-height:360px !important;
  padding:0 0 18px !important;
  margin:0 0 18px !important;
}
#chatModal .chat-bubble{
  margin:0 0 14px !important;
  padding:0 0 14px !important;
}
#chatModal .chat-bubble-head strong,
#chatModal .chat-bubble-head .chat-name-btn{
  font-size:16px !important;
  font-weight:900 !important;
}
#chatModal .chat-bubble-text{
  font-size:15px !important;
  line-height:1.7 !important;
}
#chatModal .chat-composer{
  border-top:none !important;
}
#chatModal .chat-message-input{
  background:rgba(255,255,255,.98) !important;
  border:1px solid rgba(255,248,220,.18) !important;
  border-radius:14px !important;
  min-height:136px !important;
}
#chatModal .chat-composer-helper-row{
  align-items:center !important;
}
#chatModal .chat-modal-actions{
  margin-top:8px !important;
}
#chatModal .chat-modal-actions .btn{
  min-height:44px !important;
  border-radius:12px !important;
  box-shadow:none !important;
}
#chatModal .chat-modal-actions .secondary-btn{
  background:transparent !important;
  border:1px solid rgba(255,248,220,.24) !important;
  color:#fff7e7 !important;
}
#chatModal .chat-modal-actions .primary{
  background:#ff7f74 !important;
  border:1px solid rgba(255,255,255,.08) !important;
}

/* chat redesign v11: explicit minimal sidebar and cleaner board sections */
#chatModal .chat-sidebar.chat-sidebar-minimal{
  padding:8px 28px 8px 0 !important;
  border-right:1px solid rgba(255,248,220,.24) !important;
  align-self:start !important;
}
#chatModal #chatPeoplePanel.chat-people-panel{
  display:block !important;
  padding:0 !important;
  margin:0 !important;
  min-height:0 !important;
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
  overflow:visible !important;
}
#chatModal #chatPeoplePanel.chat-people-panel::before,
#chatModal #chatPeoplePanel.chat-people-panel::after{
  content:none !important;
  display:none !important;
}
#chatModal .chat-sidebar-head.chat-sidebar-head-minimal{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 0 12px !important;
  padding:0 0 12px !important;
  border-bottom:1px solid rgba(255,248,220,.24) !important;
}
#chatModal .chat-mini-list.chat-mini-list-minimal{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  max-height:none !important;
  padding:0 !important;
}
#chatModal .chat-sidebar-head.chat-sidebar-head-minimal strong,
#chatModal .chat-sidebar.chat-sidebar-minimal .chat-empty-copy,
#chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item strong,
#chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item span,
#chatModal .chat-sidebar.chat-sidebar-minimal .chat-count-pill{
  color:#fff7e7 !important;
}
#chatModal .chat-sidebar.chat-sidebar-minimal .chat-count-pill{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  min-width:0 !important;
  font-size:16px !important;
  font-weight:900 !important;
}
#chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item,
#chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item.is-presence,
#chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item.is-active,
#chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item:hover,
#chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item:focus-visible{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:12px 0 !important;
  background:transparent !important;
  border:none !important;
  border-bottom:1px solid rgba(255,248,220,.14) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
  text-align:left !important;
}
#chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item:last-child{
  border-bottom:none !important;
}
#chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item strong{
  font-size:17px !important;
  font-weight:900 !important;
}
#chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item span{
  font-size:13px !important;
  line-height:1.65 !important;
  margin-top:3px !important;
  opacity:.86 !important;
}
#chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item.is-presence .chat-user-meta{
  display:flex !important;
  justify-content:space-between !important;
  width:100% !important;
  margin-bottom:4px !important;
}
#chatModal .chat-sidebar.chat-sidebar-minimal .chat-user-self-tag{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  min-width:0 !important;
  color:#ffd2e6 !important;
  font-size:12px !important;
}
#chatModal .chat-main{
  padding:8px 0 0 28px !important;
}
#chatModal .chat-room-banner,
#chatModal .chat-composer{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  transform:none !important;
  overflow:visible !important;
}
#chatModal .chat-room-banner::before,
#chatModal .chat-room-banner::after,
#chatModal .chat-composer::before,
#chatModal .chat-composer::after{
  content:none !important;
  display:none !important;
}
#chatModal .chat-room-banner{
  padding:0 0 16px !important;
  margin:0 0 18px !important;
  border-bottom:1px solid rgba(255,248,220,.24) !important;
}
#chatModal .chat-room-title,
#chatModal .chat-room-kicker,
#chatModal .chat-room-copy,
#chatModal .composer-helper,
#chatModal .char-counter{
  color:#fff7e7 !important;
}
#chatModal .chat-message-list{
  padding:0 0 18px !important;
  margin:0 0 18px !important;
  min-height:360px !important;
  border-bottom:1px solid rgba(255,248,220,.18) !important;
}
#chatModal .chat-message-list::before{
  content:none !important;
  display:none !important;
}
#chatModal .chat-bubble,
#chatModal .chat-bubble.is-self{
  max-width:100% !important;
  padding:0 0 14px !important;
  margin:0 0 14px !important;
  background:none !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
}
#chatModal .chat-bubble::before,
#chatModal .chat-bubble::after{
  content:none !important;
  display:none !important;
}
#chatModal .chat-bubble + .chat-bubble{
  border-top:1px solid rgba(255,248,220,.08) !important;
  padding-top:12px !important;
}
#chatModal .chat-bubble-head,
#chatModal .chat-bubble-head .chat-name-btn,
#chatModal .chat-bubble-time,
#chatModal .chat-bubble-text,
#chatModal .chat-bubble.is-self .chat-bubble-head,
#chatModal .chat-bubble.is-self .chat-bubble-time,
#chatModal .chat-bubble.is-self .chat-bubble-text{
  color:#fff7e7 !important;
  text-shadow:none !important;
}
#chatModal .chat-message-input{
  min-height:136px !important;
  background:rgba(255,255,255,.98) !important;
  border:1px solid rgba(255,248,220,.18) !important;
  border-radius:14px !important;
  box-shadow:none !important;
}
#chatModal .chat-modal-actions .btn{
  min-height:44px !important;
  border-radius:12px !important;
  box-shadow:none !important;
}
#chatModal .chat-modal-actions .secondary-btn{
  background:transparent !important;
  border:1px solid rgba(255,248,220,.24) !important;
  color:#fff7e7 !important;
}
#chatModal .chat-modal-actions .primary{
  background:#ff7f74 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.08) !important;
}
@media (max-width:760px){
  #chatModal .chat-sidebar.chat-sidebar-minimal{
    padding:0 0 14px !important;
    border-right:none !important;
    border-bottom:1px solid rgba(255,248,220,.24) !important;
    margin-bottom:14px !important;
  }
  #chatModal .chat-main{
    padding:0 !important;
  }
}

/* chat redesign v12: keep composer and send button visible */
#chatModal .chat-card{
  height:min(92vh,960px) !important;
}
#chatModal .chat-modal-body{
  height:calc(100% - 110px) !important;
  overflow:hidden !important;
}
#chatModal .chat-shell{
  min-height:0 !important;
  height:100% !important;
  align-items:stretch !important;
}
#chatModal .chat-sidebar.chat-sidebar-minimal,
#chatModal .chat-main{
  min-height:0 !important;
}
#chatModal .chat-main{
  display:grid !important;
  grid-template-rows:auto minmax(120px,1fr) auto !important;
  gap:0 !important;
  max-height:100% !important;
}
#chatModal .chat-room-banner{
  margin-bottom:12px !important;
}
#chatModal .chat-message-list{
  min-height:180px !important;
  max-height:none !important;
  overflow:auto !important;
  padding:0 0 14px !important;
  margin:0 0 14px !important;
}
#chatModal .chat-composer{
  align-self:end !important;
  padding-top:2px !important;
}
#chatModal .chat-composer-form{
  display:grid !important;
  gap:10px !important;
}
#chatModal .chat-message-input{
  min-height:96px !important;
  height:96px !important;
}
#chatModal .chat-composer-footer{
  padding-top:0 !important;
}
#chatModal .chat-composer-helper-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:wrap !important;
}
#chatModal .chat-modal-actions{
  display:flex !important;
  justify-content:flex-end !important;
  gap:12px !important;
  margin-top:0 !important;
}
#chatModal .chat-modal-actions .btn{
  min-height:42px !important;
  padding:0 16px !important;
}
@media (max-width:760px){
  #chatModal .chat-card{
    height:94vh !important;
  }
  #chatModal .chat-modal-body{
    height:calc(100% - 96px) !important;
    overflow:auto !important;
  }
  #chatModal .chat-shell{
    height:auto !important;
  }
  #chatModal .chat-main{
    grid-template-rows:auto auto auto !important;
  }
  #chatModal .chat-message-list{
    min-height:160px !important;
  }
  #chatModal .chat-modal-actions{
    justify-content:stretch !important;
  }
  #chatModal .chat-modal-actions .btn{
    flex:1 1 0 !important;
  }
}

/* chat redesign v13: extend vertical divider */
#chatModal .chat-shell{
  align-items:stretch !important;
}
#chatModal .chat-sidebar.chat-sidebar-minimal{
  align-self:stretch !important;
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  min-height:100% !important;
  padding-bottom:18px !important;
}
#chatModal #chatPeoplePanel.chat-people-panel{
  flex:1 1 auto !important;
  min-height:100% !important;
}
@media (max-width:760px){
  #chatModal .chat-sidebar.chat-sidebar-minimal{
    height:auto !important;
    min-height:0 !important;
  }
}

/* chat redesign v14: remove highlighted self-message block */
#chatModal .chat-bubble.is-self,
#chatModal .chat-bubble.is-self:hover,
#chatModal .chat-bubble.is-self:focus-visible{
  align-self:stretch !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
}
#chatModal .chat-bubble.is-self::before,
#chatModal .chat-bubble.is-self::after{
  content:none !important;
  display:none !important;
}
#chatModal .chat-bubble.is-self .chat-bubble-head,
#chatModal .chat-bubble.is-self .chat-bubble-text,
#chatModal .chat-bubble.is-self .chat-name-btn,
#chatModal .chat-bubble.is-self .chat-bubble-time{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  border:none !important;
  box-shadow:none !important;
}

/* v16: place Free chat right after Collections */
@media (min-width: 1200px){
  .hero-actions #openComposeBtn{order:1 !important;}
  .hero-actions .language-menu{order:2 !important;}
  .hero-actions .collections-menu{order:3 !important;}
  .hero-actions #openChatBtn,
  .hero-actions .chat-launch-btn{order:4 !important;}
  .hero-actions [data-i18n="view_highlights"]{order:5 !important;}
  .hero-actions [data-i18n="view_latest_notes"]{order:6 !important;}
  .hero-actions [data-i18n="view_unanswered_notes"]{order:7 !important;}
  .hero-actions [data-i18n="view_answered_notes"]{order:8 !important;}
}

/* v17: mobile-friendly chat layout */
@media (max-width: 760px){
  #chatModal .chat-card{
    width:100% !important;
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:24px 24px 0 0 !important;
  }
  #chatModal .chat-modal-head{
    padding:14px 16px !important;
  }
  #chatModal .chat-modal-body{
    padding:10px 14px 14px !important;
    height:calc(100% - 82px) !important;
    overflow:hidden !important;
  }
  #chatModal .chat-shell{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    gap:12px !important;
    height:100% !important;
    min-height:0 !important;
  }
  #chatModal .chat-sidebar.chat-sidebar-minimal{
    order:1 !important;
    padding:0 0 10px !important;
    margin:0 !important;
    border-right:none !important;
    border-bottom:1px solid rgba(255,248,220,.20) !important;
    height:auto !important;
    min-height:0 !important;
  }
  #chatModal #chatPeoplePanel.chat-people-panel{
    min-height:0 !important;
  }
  #chatModal .chat-sidebar-head.chat-sidebar-head-minimal{
    margin:0 0 8px !important;
    padding:0 0 8px !important;
  }
  #chatModal .chat-sidebar-head.chat-sidebar-head-minimal strong{
    font-size:17px !important;
  }
  #chatModal .chat-mini-list.chat-mini-list-minimal{
    display:flex !important;
    flex-direction:row !important;
    gap:10px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:0 2px 2px 0 !important;
    scrollbar-width:none !important;
  }
  #chatModal .chat-mini-list.chat-mini-list-minimal::-webkit-scrollbar{display:none !important;}
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item.is-presence,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item.is-active,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item:hover,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item:focus-visible{
    flex:0 0 auto !important;
    min-width:144px !important;
    max-width:78vw !important;
    padding:10px 12px !important;
    border:1px solid rgba(255,248,220,.16) !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.04) !important;
    border-bottom:1px solid rgba(255,248,220,.16) !important;
  }
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item strong{
    font-size:15px !important;
  }
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item span{
    font-size:12px !important;
    line-height:1.45 !important;
  }
  #chatModal .chat-main{
    order:2 !important;
    padding:0 !important;
    min-height:0 !important;
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
    gap:0 !important;
  }
  #chatModal .chat-room-banner{
    padding:0 0 10px !important;
    margin:0 0 10px !important;
  }
  #chatModal .chat-room-kicker{
    font-size:12px !important;
  }
  #chatModal .chat-room-title{
    font-size:16px !important;
  }
  #chatModal .chat-room-copy{
    font-size:13px !important;
    line-height:1.45 !important;
  }
  #chatModal .chat-message-list{
    min-height:0 !important;
    max-height:none !important;
    overflow:auto !important;
    padding:0 0 12px !important;
    margin:0 0 12px !important;
  }
  #chatModal .chat-bubble,
  #chatModal .chat-bubble.is-self{
    padding:0 0 10px !important;
    margin:0 0 10px !important;
  }
  #chatModal .chat-bubble-head,
  #chatModal .chat-bubble-head .chat-name-btn{
    font-size:14px !important;
  }
  #chatModal .chat-bubble-text{
    font-size:14px !important;
    line-height:1.55 !important;
  }
  #chatModal .chat-composer{
    padding-top:4px !important;
    background:linear-gradient(180deg, rgba(8,61,56,0), rgba(8,61,56,.92) 18%, rgba(8,61,56,.98) 100%) !important;
  }
  #chatModal .chat-message-input{
    min-height:84px !important;
    height:84px !important;
    font-size:16px !important;
    border-radius:16px !important;
  }
  #chatModal .chat-composer-footer{
    padding-top:10px !important;
  }
  #chatModal .chat-composer-helper-row{
    gap:8px !important;
    align-items:flex-start !important;
  }
  #chatModal .composer-helper{
    font-size:12px !important;
    line-height:1.4 !important;
    max-width:60% !important;
  }
  #chatModal .char-counter{
    font-size:12px !important;
  }
  #chatModal .chat-modal-actions{
    display:grid !important;
    grid-template-columns:minmax(112px,.9fr) minmax(0,1.2fr) !important;
    gap:10px !important;
    width:100% !important;
  }
  #chatModal .chat-modal-actions .btn{
    width:100% !important;
    min-height:46px !important;
    padding:0 14px !important;
    font-size:15px !important;
  }
  #chatModal .chat-modal-actions .primary{
    font-size:16px !important;
  }
  #chatModal .chat-intro-card{
    width:min(100%, 420px) !important;
    padding:22px 18px !important;
    border-radius:24px !important;
  }
  #chatModal .chat-intro-title{
    font-size:22px !important;
  }
  #chatModal .chat-intro-copy{
    font-size:14px !important;
  }
}


/* v18: mobile chat closer to a messaging app */
@media (max-width: 760px){
  #chatModal .chat-modal-head{
    padding:12px 14px !important;
    border-bottom:1px solid rgba(255,248,220,.16) !important;
  }
  #chatModal .chat-modal-titleline{
    align-items:center !important;
    gap:8px !important;
  }
  #chatModal .modal-kicker{
    font-size:11px !important;
    letter-spacing:.12em !important;
  }
  #chatModal .chat-modal-head h3{
    font-size:20px !important;
  }

  /* compact people row */
  #chatModal .chat-sidebar.chat-sidebar-minimal{
    padding:0 0 8px !important;
    border-bottom:none !important;
  }
  #chatModal .chat-sidebar-head.chat-sidebar-head-minimal{
    margin:0 0 6px !important;
    padding:0 !important;
    border-bottom:none !important;
  }
  #chatModal .chat-sidebar-head.chat-sidebar-head-minimal strong{
    font-size:15px !important;
    opacity:.94 !important;
  }
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-count-pill{
    font-size:13px !important;
    opacity:.88 !important;
  }
  #chatModal .chat-mini-list.chat-mini-list-minimal{
    gap:8px !important;
    padding:0 0 2px !important;
  }
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item.is-presence,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item.is-active,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item:hover,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item:focus-visible{
    min-width:auto !important;
    max-width:68vw !important;
    padding:8px 10px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.06) !important;
    border:1px solid rgba(255,248,220,.12) !important;
  }
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item span{
    display:none !important;
  }
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item strong{
    font-size:14px !important;
    line-height:1.2 !important;
  }
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item.is-presence .chat-user-meta{
    margin-bottom:0 !important;
    gap:8px !important;
    align-items:center !important;
  }
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-user-self-tag{
    font-size:11px !important;
    color:#ffd2e6 !important;
    opacity:.95 !important;
  }

  /* simpler room header */
  #chatModal .chat-room-banner{
    padding:0 0 8px !important;
    margin:0 0 8px !important;
  }
  #chatModal .chat-room-heading-inline{
    gap:8px !important;
    margin-bottom:0 !important;
  }
  #chatModal .chat-room-kicker{
    display:none !important;
  }
  #chatModal .chat-room-title{
    font-size:17px !important;
    line-height:1.2 !important;
  }
  #chatModal .chat-room-copy{
    display:none !important;
  }
  #chatModal .chat-room-banner-actions{
    padding-top:4px !important;
  }
  #chatModal #chatBannerActionBtn{
    min-height:38px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    font-size:13px !important;
  }

  /* more message space */
  #chatModal .chat-main{
    grid-template-rows:auto minmax(0,1fr) auto !important;
  }
  #chatModal .chat-message-list{
    padding:0 0 10px !important;
    margin:0 !important;
    border-bottom:none !important;
  }
  #chatModal .chat-bubble,
  #chatModal .chat-bubble.is-self{
    padding:0 0 12px !important;
    margin:0 0 12px !important;
  }
  #chatModal .chat-bubble-head{
    gap:6px !important;
    margin-bottom:4px !important;
  }
  #chatModal .chat-bubble-head .chat-name-btn{
    font-size:13px !important;
  }
  #chatModal .chat-bubble-time{
    font-size:10px !important;
    opacity:.68 !important;
  }
  #chatModal .chat-bubble-text{
    font-size:15px !important;
    line-height:1.6 !important;
  }

  /* app-like sticky composer */
  #chatModal .chat-composer{
    position:sticky !important;
    bottom:0 !important;
    z-index:3 !important;
    margin-top:8px !important;
    padding:10px 0 calc(env(safe-area-inset-bottom, 0px) + 2px) !important;
    background:linear-gradient(180deg, rgba(8,61,56,0), rgba(8,61,56,.82) 20%, rgba(8,61,56,.98) 100%) !important;
    border-top:1px solid rgba(255,248,220,.12) !important;
  }
  #chatModal .chat-composer-form{
    gap:8px !important;
  }
  #chatModal .chat-message-input{
    min-height:74px !important;
    height:74px !important;
    padding:14px 16px !important;
    border-radius:18px !important;
  }
  #chatModal .chat-composer-footer{
    padding-top:6px !important;
  }
  #chatModal .chat-composer-helper-row{
    justify-content:flex-end !important;
    align-items:center !important;
  }
  #chatModal .composer-helper{
    display:none !important;
  }
  #chatModal .char-counter{
    margin-left:auto !important;
    font-size:12px !important;
    opacity:.88 !important;
  }
  #chatModal .chat-modal-actions{
    grid-template-columns:92px minmax(0,1fr) !important;
    gap:8px !important;
  }
  #chatModal .chat-modal-actions .btn{
    min-height:44px !important;
    font-size:15px !important;
  }
  #chatModal .chat-modal-actions .secondary-btn{
    border-radius:14px !important;
    font-size:14px !important;
  }
  #chatModal .chat-modal-actions .primary{
    border-radius:14px !important;
    font-size:16px !important;
    font-weight:900 !important;
  }

  /* cleaner intro screen on mobile */
  #chatModal .chat-intro-card{
    gap:12px !important;
    padding:20px 16px !important;
  }
  #chatModal .chat-intro-avatar{
    width:60px !important;
    height:60px !important;
    font-size:28px !important;
  }
  #chatModal .chat-intro-copy{
    line-height:1.5 !important;
  }
  #chatModal .chat-intro-actions{
    grid-template-columns:1fr !important;
  }
}


/* v19-v23 consolidated mobile chat refinements */
@media (max-width: 760px){
  /* frame and separators */
  #chatModal .chat-card,
  #chatModal .chat-card::before,
  #chatModal .chat-card::after,
  #chatModal .chat-modal-head,
  #chatModal .chat-modal-body{
    border-radius:0 !important;
  }
  #chatModal .chat-card{
    width:100% !important;
    height:100dvh !important;
    max-height:100dvh !important;
    overflow:hidden !important;
  }
  #chatModal .chat-modal-head{
    border-bottom:1px solid rgba(255,248,220,.18) !important;
  }
  #chatModal .chat-sidebar.chat-sidebar-minimal{
    padding:0 0 12px !important;
    margin:0 0 12px !important;
    border-bottom:1px solid rgba(255,248,220,.14) !important;
  }
  #chatModal .chat-sidebar-head.chat-sidebar-head-minimal,
  #chatModal .chat-room-banner{
    display:none !important;
  }
  #chatModal .chat-mini-list.chat-mini-list-minimal{
    gap:8px !important;
    padding:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
  }
  #chatModal .chat-mini-list.chat-mini-list-minimal::-webkit-scrollbar{display:none !important;}
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item.is-presence,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item.is-active,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item:hover,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item:focus-visible{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    flex:0 0 auto !important;
    padding:8px 14px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.04) !important;
    border:1px solid rgba(255,248,220,.14) !important;
    box-shadow:none !important;
  }
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item strong{
    white-space:nowrap !important;
    font-size:14px !important;
  }
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item span,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-user-self-tag{
    display:none !important;
  }

  #chatModal .chat-main{
    grid-template-rows:minmax(0,1fr) auto !important;
  }
  #chatModal .chat-message-list{
    border-top:1px solid rgba(255,248,220,.12) !important;
    padding:14px 0 10px !important;
    margin:0 !important;
  }
  #chatModal .chat-composer{
    border-top:1px solid rgba(255,248,220,.14) !important;
    margin-top:10px !important;
    padding:12px 0 calc(env(safe-area-inset-bottom, 0px) + 2px) !important;
    background:transparent !important;
  }

  /* intro screen like centered card */
  #chatModal .chat-intro-view{
    min-height:calc(100dvh - 120px) !important;
    place-items:center !important;
    padding:22px 16px 28px !important;
  }
  #chatModal .chat-intro-card{
    width:min(100%, 720px) !important;
    min-height:auto !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    padding:26px 18px !important;
    background:linear-gradient(180deg, rgba(255,252,248,.98), rgba(255,246,239,.98)) !important;
    border:1px solid rgba(255,233,212,.9) !important;
    border-radius:28px !important;
    box-shadow:0 18px 40px rgba(0,0,0,.16) !important;
    color:#3a2a1f !important;
    text-align:center !important;
  }
  #chatModal .chat-intro-avatar{
    width:96px !important;
    height:96px !important;
    margin:0 auto 6px !important;
    border-radius:28px !important;
    background:linear-gradient(180deg,#ffd9ef,#f4cbe7) !important;
    box-shadow:inset 0 0 0 2px rgba(219,170,201,.45) !important;
    font-size:44px !important;
  }
  #chatModal .chat-intro-title{
    font-size:32px !important;
    line-height:1.15 !important;
    font-weight:900 !important;
    color:#2e2017 !important;
    margin-top:4px !important;
  }
  #chatModal .chat-intro-copy{
    font-size:18px !important;
    line-height:1.55 !important;
    color:rgba(58,42,31,.82) !important;
    max-width:92% !important;
    margin:0 auto 2px !important;
  }
  #chatModal #chatEntryAliasInput{
    min-height:74px !important;
    padding:0 20px !important;
    font-size:24px !important;
    font-weight:800 !important;
    color:#261b14 !important;
    background:rgba(255,255,255,.96) !important;
    border:2px solid rgba(210,224,235,.95) !important;
    border-radius:22px !important;
    box-shadow:inset 0 0 0 3px rgba(174,219,248,.45) !important;
  }
  #chatModal #chatEntryAliasInput::placeholder{
    color:rgba(92,78,67,.55) !important;
  }
  #chatModal .chat-intro-actions{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    width:100% !important;
    margin-top:4px !important;
  }
  #chatModal #cancelChatModalBtn{
    display:none !important;
  }
  /* compact pill sized to label */
  #chatModal #chatEnterRoomBtn{
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 auto !important;
    padding:0 26px !important;
    min-height:50px !important;
    border-radius:999px !important;
    background:transparent !important;
    border:1px solid rgba(255,248,220,.22) !important;
    color:#fff7eb !important;
    box-shadow:none !important;
    line-height:1 !important;
    font-size:17px !important;
    font-weight:900 !important;
  }

  /* transparent minimal composer */
  #chatModal .chat-composer-form{
    gap:10px !important;
  }
  #chatModal .chat-message-input{
    min-height:84px !important;
    height:84px !important;
    padding:18px 18px !important;
    background:transparent !important;
    border:1px solid rgba(255,248,220,.14) !important;
    border-radius:26px !important;
    box-shadow:none !important;
    color:#fff7eb !important;
  }
  #chatModal .chat-message-input::placeholder{
    color:rgba(255,248,220,.48) !important;
  }
  #chatModal .chat-message-input:focus{
    border-color:rgba(255,248,220,.24) !important;
    box-shadow:none !important;
    outline:none !important;
  }
  #chatModal .chat-composer-footer,
  #chatModal .chat-composer-helper-row,
  #chatModal .composer-helper,
  #chatModal .char-counter{
    padding-top:0 !important;
    margin-top:0 !important;
  }
  #chatModal .composer-helper,
  #chatModal .char-counter{display:none !important;}

  /* transparent send pill sized to label */
  #chatModal .chat-modal-actions{
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    width:100% !important;
    margin-top:0 !important;
    background:transparent !important;
    padding-top:0 !important;
  }
  #chatModal .chat-modal-actions .secondary-btn,
  #chatModal #chatBackToStartBtn{display:none !important;}
  #chatModal .chat-modal-actions .primary,
  #chatModal .chat-modal-actions .btn.primary,
  #chatModal #sendChatMessageBtn{
    width:auto !important;
    min-width:0 !important;
    margin-left:auto !important;
    padding:0 22px !important;
    min-height:46px !important;
    border-radius:999px !important;
    background:transparent !important;
    border:1px solid rgba(255,248,220,.22) !important;
    color:#fff7eb !important;
    box-shadow:none !important;
    font-size:16px !important;
    font-weight:900 !important;
  }
}

/* v24: force mobile intro/send buttons to transparent pill style */
@media (max-width: 760px){
  #chatModal .chat-intro-actions{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:0 !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:6px 0 0 !important;
  }
  #chatModal .chat-intro-actions .primary,
  #chatModal .chat-intro-actions .btn.primary,
  #chatModal #chatEnterRoomBtn{
    width:fit-content !important;
    min-width:0 !important;
    max-width:calc(100vw - 96px) !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    align-self:center !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:1px solid rgba(255,248,220,.22) !important;
    box-shadow:none !important;
    color:#fff7eb !important;
    padding:0 28px !important;
    margin:0 auto !important;
    min-height:50px !important;
    border-radius:999px !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  #chatModal .chat-composer,
  #chatModal .chat-composer-footer,
  #chatModal .chat-modal-actions{
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:none !important;
    box-shadow:none !important;
  }
  #chatModal .chat-message-input{
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:1px solid rgba(255,248,220,.16) !important;
    box-shadow:none !important;
  }
  #chatModal .chat-modal-actions{
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:0 !important;
    padding:0 !important;
    margin:0 !important;
  }
  #chatModal .chat-modal-actions .primary,
  #chatModal .chat-modal-actions .btn.primary,
  #chatModal #sendChatMessageBtn{
    width:fit-content !important;
    min-width:0 !important;
    max-width:calc(100vw - 96px) !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin-left:auto !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:1px solid rgba(255,248,220,.22) !important;
    box-shadow:none !important;
    color:#fff7eb !important;
    padding:0 24px !important;
    min-height:46px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
  }
}

/* v26: restore desktop feeling-category dropdown options */
#composeModal .composer-select{
  appearance:auto !important;
  -webkit-appearance:menulist !important;
  color:#2f261f !important;
  background:#fffaf2 !important;
}
#composeModal .composer-select option,
#composeModal .composer-select optgroup{
  color:#2f261f !important;
  background:#fffaf2 !important;
}
#composeModal .composer-select:focus{
  color:#2f261f !important;
  background:#fffaf2 !important;
}


/* v62: mobile cleanup per requested phone UX refinements */
@media (max-width: 760px){
  html, body{
    background:#ffffff !important;
    color:#1f2937 !important;
  }

  body::before,
  .page::before,
  .board-wrap::before{
    display:none !important;
    content:none !important;
    background:none !important;
    background-image:none !important;
  }

  .page,
  .hero,
  .board-wrap,
  .toolbar,
  .content,
  .header-illustration,
  .brand-logo,
  .section,
  #highlights-section,
  #latest-section,
  #sensitive-section{
    background:none !important;
    background-image:none !important;
    box-shadow:none !important;
    border:none !important;
  }

  .page{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:20px 16px 30px !important;
    border:0 !important;
    border-radius:0 !important;
    color:#1f2937 !important;
  }

  .hero{
    gap:14px !important;
    margin-bottom:10px !important;
    padding:0 0 10px !important;
  }

  .heading .hero-kicker,
  .heading h1,
  .brand-kicker,
  .board-footer,
  .visit-count,
  .visit-count strong{
    color:#1f2937 !important;
    -webkit-text-fill-color:#1f2937 !important;
    text-shadow:none !important;
  }

  .heading h1{
    display:flex !important;
    align-items:flex-start !important;
    gap:12px !important;
    margin:0 !important;
    font-size:clamp(32px, 9.2vw, 42px) !important;
    line-height:1.08 !important;
    font-weight:800 !important;
  }

  .heading h1::before{
    content:"";
    flex:0 0 48px;
    width:48px;
    height:48px;
    border-radius:999px;
    background:#fff7d8 url('apple-touch-icon.png') center/90% no-repeat !important;
    border:1.5px solid #d7c27a !important;
    box-shadow:none !important;
    margin-top:2px;
    position:static !important;
  }

  .heading h1::after{
    left:0 !important;
    right:auto !important;
    width:min(180px, 60%) !important;
    bottom:-6px !important;
    height:4px !important;
    opacity:.9 !important;
  }

  .header-illustration{
    padding:0 !important;
    justify-content:flex-start !important;
  }

  .brand-logo{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    padding:0 !important;
    margin:0 !important;
    transform:none !important;
  }

  .brand-mark,
  .brand-ring,
  .brand-note,
  .brand-heart,
  .brand-title{
    display:none !important;
  }

  .brand-copy{
    max-width:100% !important;
  }

  .brand-kicker{
    font-size:15px !important;
    font-weight:700 !important;
    opacity:1 !important;
    margin-bottom:8px !important;
  }

  .brand-sub,
  #coffeeCta.brand-sub{
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
    margin-top:0 !important;
    padding:10px 16px !important;
    background:#fff7d8 !important;
    color:#6b4f1d !important;
    border:1.5px solid #e8d18c !important;
    border-radius:999px !important;
    box-shadow:none !important;
    font-family:"Noto Sans Thai","Inter",system-ui,sans-serif !important;
    font-size:15px !important;
  }

  .brand-sub::after,
  .coffee-trigger,
  .coffee-arrow{
    display:none !important;
  }

  .hero > .hero-actions,
  .hero-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
    align-items:stretch !important;
    padding:8px 0 0 !important;
    margin-top:6px !important;
    border:0 !important;
  }

  .hero-actions .language-menu{
    display:none !important;
  }

  .hero-actions .mobile-language-picker{
    display:block !important;
    order:4;
    position:relative !important;
    min-width:0 !important;
  }

  #openComposeBtn{order:1;}
  .hero-actions .collections-menu{order:2;}
  #openChatBtn{order:3;}
  .hero-actions .mobile-language-picker{order:4;}
  .hero-actions .hero-link-btn[data-i18n="view_answered_notes"]{order:5;grid-column:1 / -1;justify-self:start;}

  .hero-actions .hero-link-btn[data-i18n="view_unanswered_notes"],
  .latest-inline-link[data-i18n="view_unanswered_notes"]{
    display:none !important;
  }

  #openComposeBtn,
  .hero-actions .collections-menu summary,
  #openChatBtn{
    width:100% !important;
    min-height:64px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:12px !important;
    padding:12px 16px 12px 14px !important;
    border-radius:24px !important;
    border:1.5px solid #dde5ea !important;
    background:#ffffff !important;
    color:#22313f !important;
    box-shadow:none !important;
    text-decoration:none !important;
    text-shadow:none !important;
    font-family:"Noto Sans Thai","Inter",system-ui,sans-serif !important;
    font-size:16px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    white-space:normal !important;
  }

  #openComposeBtn::before,
  .hero-actions .collections-menu summary::before,
  #openChatBtn::before,
  .hero-actions .mobile-language-picker::before{
    width:38px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 38px;
    border-radius:999px;
    border:1.5px solid #d7e0e7;
    background:#f5f8fb;
    box-shadow:none;
    font-size:18px;
    line-height:1;
  }

  #openComposeBtn::before{content:"✍️";}
  .hero-actions .collections-menu summary::before{content:"🗂️";}
  #openChatBtn::before{content:"💬";}
  .hero-actions .mobile-language-picker::before{content:"🌐"; position:absolute; left:14px; top:50%; transform:translateY(-50%); z-index:1;}

  .hero-actions .collections-menu summary .top-icon-badge,
  #openChatBtn .chat-launch-icon{
    display:none !important;
  }

  .hero-actions .collections-menu summary,
  #openChatBtn,
  #openComposeBtn{
    text-decoration:none !important;
  }

  .hero-actions .mobile-language-picker label{
    display:none !important;
  }

  .hero-actions .mobile-language-select{
    width:100% !important;
    min-height:64px !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    border-radius:24px !important;
    border:1.5px solid #dde5ea !important;
    background:#ffffff !important;
    box-shadow:none !important;
    color:#22313f !important;
    padding:12px 44px 12px 58px !important;
    font-family:"Noto Sans Thai","Inter",system-ui,sans-serif !important;
    font-size:16px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
  }

  .hero-actions .mobile-language-picker::after{
    content:"▾";
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    color:#627181;
    font-size:16px;
    pointer-events:none;
  }

  .hero-actions .hero-link-btn[data-i18n="view_answered_notes"]{
    min-height:auto !important;
    padding:4px 2px !important;
    border:0 !important;
    background:none !important;
    border-radius:0 !important;
    color:#566472 !important;
    font-size:14px !important;
    font-weight:600 !important;
    font-family:"Noto Sans Thai","Inter",system-ui,sans-serif !important;
    text-decoration:underline !important;
    text-underline-offset:4px !important;
    text-decoration-thickness:1.5px !important;
    box-shadow:none !important;
  }

  .section-head h2,
  .section-head h4{
    font-size:18px !important;
    line-height:1.25 !important;
    font-weight:700 !important;
    color:#1f2937 !important;
    text-shadow:none !important;
    padding-bottom:6px !important;
  }

  .section-head h2::after,
  .section-head h4::after{
    width:120px !important;
    height:3px !important;
    bottom:-3px !important;
  }

  .board-footer{
    border-top:1px solid #e6ebf0 !important;
    padding-top:14px !important;
    margin-top:22px !important;
  }
}


/* v63: restore original mobile background/frame while keeping other phone UX changes */
@media (max-width: 760px){
  html, body{
    background:#ffffff !important;
    color:var(--chalk) !important;
  }

  .page{
    color:var(--chalk) !important;
    background:
      radial-gradient(circle at 16% 10%, rgba(255,255,255,.08), transparent 19%),
      radial-gradient(circle at 82% 18%, rgba(255,255,255,.05), transparent 20%),
      linear-gradient(115deg, rgba(255,255,255,.025) 0 1px, transparent 1px 16px),
      radial-gradient(rgba(255,255,255,.08) .9px, transparent 1px),
      linear-gradient(180deg,var(--chalkboard),var(--chalkboard-2)) !important;
    background-size:auto, auto, 34px 34px, 18px 18px, auto !important;
    border:8px solid #c8872e !important;
    border-radius:0 !important;
    box-shadow:
      inset 0 0 0 4px rgba(255,226,137,.45),
      inset 0 0 52px rgba(0,0,0,.35) !important;
  }

  .page::before{
    display:block !important;
    content:"" !important;
    position:absolute !important;
    inset:-18px !important;
    border-radius:8px !important;
    pointer-events:none !important;
    background:
      linear-gradient(90deg,rgba(255,226,118,.48),transparent 18%,rgba(80,38,11,.18) 52%,transparent 80%,rgba(255,226,118,.35)),
      repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 2px,transparent 2px 18px) !important;
    mix-blend-mode:multiply !important;
    opacity:.38 !important;
  }

  .heading .hero-kicker,
  .heading h1,
  .brand-kicker,
  .section-head h2,
  .section-head h4,
  .board-footer,
  .visit-count,
  .visit-count strong{
    color:var(--chalk) !important;
    -webkit-text-fill-color:var(--chalk) !important;
    text-shadow:0 1px 0 rgba(0,0,0,.18) !important;
  }

  .heading h1::after,
  .section-head h2::after,
  .section-head h4::after{
    opacity:.95 !important;
  }

  .hero-actions .hero-link-btn[data-i18n="view_answered_notes"]{
    color:rgba(247,241,223,.92) !important;
    text-decoration-color:rgba(247,241,223,.65) !important;
  }

  .board-footer{
    border-top:1px solid rgba(247,241,223,.24) !important;
  }
}


/* v64: refine mobile hero title, logo, and convert action controls to plain links on a post-it */
@media (max-width: 760px){
  .heading{
    display:block !important;
  }

  .heading h1{
    display:grid !important;
    grid-template-columns:70px minmax(0, 1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:14px !important;
    row-gap:4px !important;
    align-items:center !important;
    margin:0 !important;
    font-size:clamp(18px, 5vw, 30px) !important;
    line-height:1.02 !important;
    letter-spacing:.01em !important;
    max-width:100% !important;
  }

  .heading h1::before{
    content:"" !important;
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    width:62px !important;
    height:62px !important;
    border-radius:999px !important;
    background:
      radial-gradient(circle at 30% 28%, rgba(255,255,255,.90) 0 10%, transparent 11%),
      radial-gradient(circle at 50% 52%, #f8e38b 0 44%, #e3c963 45% 58%, #173f36 59% 73%, #f6edbd 74% 100%) !important;
    border:2px solid rgba(247,241,223,.88) !important;
    box-shadow:
      0 0 0 3px rgba(247,241,223,.18),
      inset 0 0 0 2px rgba(92,69,39,.18) !important;
    position:relative !important;
    margin:0 !important;
  }

  .hero-title-main,
  .hero-title-sub{
    display:block !important;
    grid-column:2 !important;
  }

  .hero-title-main{
    grid-row:1 !important;
    font-size:1.02em !important;
  }

  .hero-title-sub{
    grid-row:2 !important;
    font-size:1.02em !important;
  }

  .heading h1::after{
    grid-column:2 !important;
    left:0 !important;
    right:auto !important;
    width:min(140px, 54%) !important;
    bottom:-8px !important;
    height:4px !important;
  }

  .header-illustration{
    margin-top:4px !important;
  }

  .brand-logo{
    justify-content:flex-start !important;
  }

  .brand-kicker,
  .brand-title{
    display:none !important;
  }

  .brand-copy{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
  }

  .brand-sub,
  #coffeeCta.brand-sub{
    margin-top:2px !important;
    padding:10px 18px !important;
    font-size:15px !important;
  }

  .hero-actions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px 16px !important;
    margin-top:14px !important;
    padding:14px 16px !important;
    background:#f6e9a7 !important;
    border:2px solid rgba(92,69,39,.18) !important;
    border-radius:20px !important;
    box-shadow:0 12px 20px rgba(0,0,0,.12) !important;
    position:relative !important;
  }

  .hero-actions::before{
    content:"";
    position:absolute;
    top:-11px;
    left:50%;
    transform:translateX(-50%) rotate(-2deg);
    width:92px;
    height:24px;
    border-radius:8px;
    background:rgba(255,253,248,.72);
    border:1px solid rgba(92,69,39,.10);
    box-shadow:0 2px 6px rgba(74,52,28,.08);
  }

  #openComposeBtn,
  .hero-actions .collections-menu summary,
  #openChatBtn,
  .hero-actions .mobile-language-select,
  .hero-actions .hero-link-btn[data-i18n="view_answered_notes"]{
    width:auto !important;
    min-height:auto !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#5a4030 !important;
    text-shadow:none !important;
    text-decoration:underline !important;
    text-underline-offset:4px !important;
    text-decoration-thickness:2px !important;
    text-decoration-color:rgba(185,79,70,.38) !important;
    font-family:"Noto Sans Thai","Inter",system-ui,sans-serif !important;
    font-size:15px !important;
    font-weight:700 !important;
    line-height:1.3 !important;
    justify-content:flex-start !important;
  }

  #openComposeBtn::before,
  .hero-actions .collections-menu summary::before,
  #openChatBtn::before,
  .hero-actions .mobile-language-picker::before,
  .hero-actions .mobile-language-picker::after{
    display:none !important;
    content:none !important;
  }

  #openComposeBtn,
  .hero-actions .collections-menu,
  #openChatBtn,
  .hero-actions .mobile-language-picker,
  .hero-actions .hero-link-btn[data-i18n="view_answered_notes"]{
    display:block !important;
    min-width:0 !important;
  }

  .hero-actions .collections-menu summary{
    display:block !important;
  }

  .hero-actions .mobile-language-picker{
    order:4 !important;
  }

  .hero-actions .mobile-language-picker label{
    display:none !important;
  }

  .hero-actions .mobile-language-select{
    display:block !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    padding-right:16px !important;
  }

  .hero-actions .hero-link-btn[data-i18n="view_answered_notes"]{
    order:5 !important;
    grid-column:1 / -1 !important;
    justify-self:start !important;
    font-size:14px !important;
  }
}


/* v65: polish mobile hero layout after latest feedback */
@media (max-width: 760px){
  .hero{
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:0 0 16px !important;
    margin-bottom:16px !important;
  }

  .heading .hero-kicker{
    margin:0 0 10px !important;
    font-size:14px !important;
    font-weight:800 !important;
    color:#f5b0ad !important;
    -webkit-text-fill-color:#f5b0ad !important;
    text-shadow:0 1px 0 rgba(0,0,0,.32) !important;
  }

  .heading h1{
    column-gap:12px !important;
    row-gap:2px !important;
    font-size:clamp(15px, 4.7vw, 22px) !important;
    line-height:1.05 !important;
    width:100% !important;
    max-width:320px !important;
  }

  .heading h1::before{
    width:58px !important;
    height:58px !important;
    background:
      radial-gradient(circle at 28% 28%, rgba(255,255,255,.95) 0 10%, transparent 11%),
      radial-gradient(circle at 50% 50%, #f6e08c 0 42%, #e1c55e 43% 56%, #173f36 57% 69%, #f9efc7 70% 100%) !important;
    border:2px solid #fbf2cf !important;
    box-shadow:
      0 0 0 3px rgba(251,242,207,.16),
      inset 0 0 0 2px rgba(91,68,42,.15),
      0 8px 14px rgba(0,0,0,.16) !important;
  }

  .hero-title-main,
  .hero-title-sub{
    font-weight:800 !important;
    letter-spacing:.01em !important;
  }

  .hero-title-main{font-size:1.08em !important;}
  .hero-title-sub{font-size:1.08em !important;}

  .heading h1::after{
    width:min(118px, 48%) !important;
    bottom:-6px !important;
    height:4px !important;
  }

  .header-illustration{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin-top:2px !important;
  }

  .brand-logo,
  .brand-copy{
    width:100% !important;
  }

  .brand-sub,
  #coffeeCta.brand-sub{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    max-width:100% !important;
    margin:2px 0 0 70px !important;
    padding:10px 18px !important;
    border-radius:999px !important;
    border:2px solid rgba(255,233,170,.75) !important;
    background:#f9efc6 !important;
    color:#6b4f1d !important;
    box-shadow:0 8px 16px rgba(0,0,0,.12) !important;
    font-size:15px !important;
    font-weight:800 !important;
  }

  .hero-actions{
    grid-template-columns:1fr 1fr !important;
    gap:8px 18px !important;
    margin-top:16px !important;
    padding:16px 18px 14px !important;
    background:#f3e39a !important;
    border:2px solid rgba(91,68,42,.18) !important;
    border-radius:18px !important;
    box-shadow:0 14px 22px rgba(0,0,0,.12) !important;
    align-items:start !important;
  }

  .hero-actions::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:16px;
    pointer-events:none;
    background-image:radial-gradient(rgba(91,68,42,.08) 1px, transparent 1px);
    background-size:12px 12px;
    opacity:.55;
  }

  #openComposeBtn,
  .hero-actions .collections-menu summary,
  #openChatBtn,
  .hero-actions .mobile-language-select,
  .hero-actions .hero-link-btn[data-i18n="view_answered_notes"]{
    position:relative !important;
    z-index:1 !important;
    color:#634738 !important;
    font-size:15px !important;
    font-weight:800 !important;
    text-decoration-color:rgba(194,112,110,.44) !important;
  }

  #openComposeBtn:hover,
  .hero-actions .collections-menu summary:hover,
  #openChatBtn:hover,
  .hero-actions .hero-link-btn[data-i18n="view_answered_notes"]:hover{
    color:#8a4e52 !important;
    transform:none !important;
  }

  .hero-actions .mobile-language-picker,
  .hero-actions .collections-menu,
  #openComposeBtn,
  #openChatBtn,
  .hero-actions .hero-link-btn[data-i18n="view_answered_notes"]{
    align-self:start !important;
  }

  .hero-actions .mobile-language-select{
    width:100% !important;
    color:#634738 !important;
    background:transparent !important;
    padding:0 16px 0 0 !important;
    line-height:1.3 !important;
  }

  .hero-actions .hero-link-btn[data-i18n="view_answered_notes"]{
    margin-top:2px !important;
  }
}


/* v66: final mobile cleanup based on latest screenshot */
@media (max-width:760px){
  html body .page .hero .heading .hero-kicker{
    display:block !important;
    padding-left:10px !important;
    margin:0 0 10px !important;
    font-size:13px !important;
    line-height:1.2 !important;
  }

  html body .page .hero .heading h1{
    display:grid !important;
    grid-template-columns:68px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:14px !important;
    row-gap:2px !important;
    align-items:center !important;
    max-width:320px !important;
    width:100% !important;
    margin:0 !important;
    font-size:clamp(15px,4.6vw,22px) !important;
    line-height:1.04 !important;
    text-wrap:balance !important;
  }

  html body .page .hero .heading h1 span,
  html body .page .hero .heading .hero-title-main,
  html body .page .hero .heading .hero-title-sub{
    display:block !important;
    white-space:nowrap !important;
  }

  html body .page .hero .heading .hero-title-main{grid-column:2; grid-row:1;}
  html body .page .hero .heading .hero-title-sub{grid-column:2; grid-row:2;}

  html body .page .hero .heading h1::before{
    content:"" !important;
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    width:60px !important;
    height:60px !important;
    border-radius:999px !important;
    position:static !important;
    margin:0 !important;
    background:#fff7d8 url('apple-touch-icon.png') center/84% no-repeat !important;
    border:2px solid rgba(250,241,205,.92) !important;
    box-shadow:0 0 0 4px rgba(250,241,205,.14), 0 10px 16px rgba(0,0,0,.14) !important;
  }

  html body .page .hero .heading h1::after{
    left:auto !important;
    right:0 !important;
    width:120px !important;
    bottom:-8px !important;
  }

  html body .page .hero .header-illustration{
    margin-top:10px !important;
  }

  html body .page .hero .brand-sub,
  html body .page .hero #coffeeCta.brand-sub{
    margin:0 0 0 82px !important;
    padding:12px 20px !important;
    font-size:15px !important;
    box-shadow:0 8px 16px rgba(0,0,0,.10) !important;
  }

  html body .page .hero .hero-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-areas:
      "compose compose"
      "collections chat"
      "language latest" !important;
    gap:12px 22px !important;
    margin-top:30px !important;
    padding:20px 22px 18px !important;
    background:#f4e49f !important;
    border:0 !important;
    border-radius:18px 18px 26px 26px !important;
    box-shadow:0 10px 22px rgba(0,0,0,.14), inset 0 0 0 2px rgba(185,156,84,.24) !important;
    position:relative !important;
    overflow:visible !important;
  }

  html body .page .hero .hero-actions::before{
    content:"" !important;
    position:absolute !important;
    top:-13px !important;
    left:50% !important;
    transform:translateX(-50%) rotate(-2deg) !important;
    width:96px !important;
    height:28px !important;
    border-radius:8px !important;
    background:rgba(255,255,255,.52) !important;
    border:1px solid rgba(91,68,42,.09) !important;
    box-shadow:0 3px 8px rgba(74,52,28,.10) !important;
  }

  html body .page .hero .hero-actions::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    border-radius:18px 18px 26px 26px !important;
    background-image:radial-gradient(rgba(91,68,42,.055) 1px, transparent 1px) !important;
    background-size:13px 13px !important;
    pointer-events:none !important;
  }

  html body .page .hero #openComposeBtn{grid-area:compose !important;}
  html body .page .hero .collections-menu{grid-area:collections !important;}
  html body .page .hero #openChatBtn{grid-area:chat !important;}
  html body .page .hero .mobile-language-picker{grid-area:language !important;}
  html body .page .hero .hero-link-btn[data-i18n="view_answered_notes"]{grid-area:latest !important;}

  html body .page .hero #openComposeBtn,
  html body .page .hero .collections-menu summary,
  html body .page .hero #openChatBtn,
  html body .page .hero .mobile-language-select,
  html body .page .hero .hero-link-btn[data-i18n="view_answered_notes"]{
    position:relative !important;
    z-index:1 !important;
    display:block !important;
    width:100% !important;
    min-height:auto !important;
    padding:0 !important;
    margin:0 !important;
    border:none !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    outline:none !important;
    color:#5d4332 !important;
    text-align:left !important;
    font-family:"Noto Sans Thai","Inter",system-ui,sans-serif !important;
    font-size:15px !important;
    font-weight:800 !important;
    line-height:1.35 !important;
    text-decoration:underline !important;
    text-decoration-thickness:2px !important;
    text-underline-offset:4px !important;
    text-decoration-color:rgba(183,116,102,.42) !important;
    transform:none !important;
  }

  html body .page .hero #openComposeBtn{
    font-size:16px !important;
    color:#cb8f96 !important;
    text-decoration-color:rgba(203,143,150,.48) !important;
  }

  html body .page .hero #openChatBtn,
  html body .page .hero #openChatBtn span{
    color:#d58ab8 !important;
    text-decoration-color:rgba(213,138,184,.48) !important;
  }

  html body .page .hero .mobile-language-select{
    appearance:none !important;
    -webkit-appearance:none !important;
    padding-right:0 !important;
    background-image:none !important;
  }

  html body .page .hero #openComposeBtn::before,
  html body .page .hero #openComposeBtn::after,
  html body .page .hero .collections-menu summary::before,
  html body .page .hero .collections-menu summary::after,
  html body .page .hero #openChatBtn::before,
  html body .page .hero #openChatBtn::after,
  html body .page .hero .mobile-language-picker::before,
  html body .page .hero .mobile-language-picker::after,
  html body .page .hero .top-icon-badge,
  html body .page .hero .chat-launch-icon{
    display:none !important;
    content:none !important;
  }

  html body .page .hero .hero-link-btn[data-i18n="view_unanswered_notes"]{
    display:none !important;
  }

  html body .page .hero .hero-link-btn[data-i18n="view_answered_notes"]{
    font-size:15px !important;
  }
}


/* v67: restore original logo, force two-line title, and move coffee link into sticky-note links */
@media (max-width:760px){
  html body .page .hero{
    position:relative !important;
    display:block !important;
    padding:0 0 14px !important;
    margin-bottom:16px !important;
  }

  html body .page .hero .heading{
    padding-left:108px !important;
    min-height:104px !important;
    position:relative !important;
    z-index:2 !important;
  }

  html body .page .hero .heading .hero-kicker{
    margin:0 0 10px !important;
    padding-left:0 !important;
  }

  html body .page .hero .heading h1{
    display:block !important;
    max-width:none !important;
    width:auto !important;
    margin:0 !important;
    font-size:clamp(16px, 4.9vw, 22px) !important;
    line-height:1.08 !important;
  }

  html body .page .hero .heading h1::before{
    display:none !important;
    content:none !important;
  }

  html body .page .hero .heading .hero-title-main,
  html body .page .hero .heading .hero-title-sub{
    display:block !important;
    white-space:normal !important;
  }

  html body .page .hero .heading .hero-title-sub{
    margin-top:2px !important;
  }

  html body .page .hero .heading h1::after{
    left:0 !important;
    right:auto !important;
    width:118px !important;
    bottom:-10px !important;
  }

  html body .page .hero .header-illustration{
    position:absolute !important;
    top:48px !important;
    left:18px !important;
    width:78px !important;
    margin:0 !important;
    padding:0 !important;
    z-index:1 !important;
  }

  html body .page .hero .brand-logo{
    display:block !important;
    width:auto !important;
    max-width:none !important;
    padding:0 !important;
    margin:0 !important;
  }

  html body .page .hero .brand-mark,
  html body .page .hero .brand-ring,
  html body .page .hero .brand-note,
  html body .page .hero .brand-heart{
    display:block !important;
  }

  html body .page .hero .brand-copy,
  html body .page .hero .brand-title,
  html body .page .hero .brand-kicker,
  html body .page .hero .brand-sub,
  html body .page .hero #coffeeCta.brand-sub{
    display:none !important;
  }

  html body .page .hero .hero-actions{
    grid-template-areas:
      "compose compose"
      "collections chat"
      "language coffee" !important;
    margin-top:28px !important;
  }

  html body .page .hero .hero-coffee-link{
    grid-area:coffee !important;
    position:relative !important;
    z-index:1 !important;
    display:block !important;
    width:100% !important;
    min-height:auto !important;
    padding:0 !important;
    margin:0 !important;
    border:none !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    outline:none !important;
    color:#5d4332 !important;
    text-align:left !important;
    font-family:"Noto Sans Thai","Inter",system-ui,sans-serif !important;
    font-size:15px !important;
    font-weight:800 !important;
    line-height:1.35 !important;
    text-decoration:underline !important;
    text-decoration-thickness:2px !important;
    text-underline-offset:4px !important;
    text-decoration-color:rgba(183,116,102,.42) !important;
    transform:none !important;
    cursor:pointer !important;
  }

  html body .page .hero .hero-coffee-link:hover,
  html body .page .hero .hero-coffee-link:focus-visible{
    color:#8a5c2f !important;
  }
}


/* v68: final mobile polish for logo/title/sticky-note layout */
@media (max-width:760px){
  html body .page{
    padding:20px 18px 30px !important;
  }

  html body .page .hero{
    margin-bottom:18px !important;
    padding-bottom:8px !important;
  }

  html body .page .hero .heading{
    padding-left:104px !important;
    min-height:96px !important;
    max-width:none !important;
  }

  html body .page .hero .heading .hero-kicker{
    font-size:13px !important;
    letter-spacing:.01em !important;
    margin-bottom:12px !important;
  }

  html body .page .hero .heading h1{
    max-width:245px !important;
    font-size:clamp(16px, 4.8vw, 21px) !important;
    line-height:1.06 !important;
    letter-spacing:0 !important;
    text-wrap:balance !important;
  }

  html body .page .hero .heading .hero-title-main,
  html body .page .hero .heading .hero-title-sub{
    display:block !important;
  }

  html body .page .hero .heading .hero-title-main{
    margin-bottom:2px !important;
  }

  html body .page .hero .heading h1::after{
    width:124px !important;
    height:4px !important;
    bottom:-9px !important;
  }

  html body .page .hero .header-illustration{
    top:52px !important;
    left:20px !important;
    width:74px !important;
  }

  html body .page .hero .brand-mark{
    width:74px !important;
    height:74px !important;
  }

  html body .page .hero .brand-ring{
    border-width:2px !important;
  }

  html body .page .hero .brand-note{
    width:38px !important;
    height:38px !important;
    left:17px !important;
    top:16px !important;
    border-radius:13px !important;
  }

  html body .page .hero .brand-heart{
    right:7px !important;
    top:6px !important;
    width:25px !important;
    height:25px !important;
    font-size:11px !important;
  }

  html body .page .hero .hero-actions{
    margin-top:24px !important;
    padding:18px 20px 18px !important;
    gap:14px 26px !important;
    border-radius:18px 18px 24px 24px !important;
  }

  html body .page .hero .hero-actions::before{
    width:92px !important;
    height:26px !important;
    top:-12px !important;
  }

  html body .page .hero #openComposeBtn,
  html body .page .hero .collections-menu summary,
  html body .page .hero #openChatBtn,
  html body .page .hero .mobile-language-select,
  html body .page .hero .hero-coffee-link{
    font-size:15px !important;
    line-height:1.32 !important;
  }

  html body .page .hero #openComposeBtn{
    font-size:16px !important;
  }

  html body .page .hero .hero-coffee-link{
    white-space:normal !important;
  }

  html body .page .hero .mobile-language-picker,
  html body .page .hero .hero-coffee-link{
    align-self:start !important;
  }

  html body .page .hero .mobile-language-select{
    width:100% !important;
  }
}


/* v69: mobile language link shows globe + Select language */
@media (max-width:760px){
  html body .page .hero .mobile-language-picker{
    position:relative !important;
    display:block !important;
    min-height:28px !important;
    z-index:1 !important;
  }

  html body .page .hero .mobile-language-picker::before{
    content:"🌐 Select language" !important;
    display:block !important;
    position:relative !important;
    color:#5d4332 !important;
    font-family:"Noto Sans Thai","Inter",system-ui,sans-serif !important;
    font-size:15px !important;
    font-weight:800 !important;
    line-height:1.35 !important;
    text-align:left !important;
    text-decoration:underline !important;
    text-decoration-thickness:2px !important;
    text-underline-offset:4px !important;
    text-decoration-color:rgba(183,116,102,.42) !important;
    white-space:normal !important;
  }

  html body .page .hero .mobile-language-picker::after{
    display:none !important;
    content:none !important;
  }

  html body .page .hero .mobile-language-select{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    opacity:0 !important;
    cursor:pointer !important;
    z-index:2 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
  }
}


/* v72 restored: mobile debug mode — color all major visible/invisible frames to inspect layout boundaries */
@media (max-width:760px){
  html body,
  html body .page,
  html body .board-wrap,
  html body .content{
    outline:3px solid rgba(255,0,0,.95) !important;
    outline-offset:-1px !important;
  }

  html body .hero{
    outline:3px solid rgba(255,128,0,.95) !important;
    outline-offset:-1px !important;
    background-color:rgba(255,128,0,.05) !important;
  }

  html body .heading{
    outline:3px solid rgba(255,0,255,.95) !important;
    outline-offset:-1px !important;
    background-color:rgba(255,0,255,.05) !important;
  }

  html body .header-illustration,
  html body .brand-logo,
  html body .brand-mark{
    outline:3px solid rgba(0,128,255,.95) !important;
    outline-offset:-1px !important;
    background-color:rgba(0,128,255,.05) !important;
  }

  html body .hero-actions{
    outline:4px solid rgba(0,200,120,.98) !important;
    outline-offset:-1px !important;
    background-color:rgba(0,200,120,.08) !important;
  }

  html body .hero-actions > *,
  html body .hero-actions .collections-menu,
  html body .hero-actions .mobile-language-picker,
  html body .hero-actions .hero-link-btn,
  html body .hero-actions .hero-coffee-link,
  html body .hero-actions #openComposeBtn,
  html body .hero-actions #openChatBtn,
  html body .hero-actions .mobile-language-select,
  html body .hero-actions .collections-menu summary{
    outline:3px dashed rgba(0,90,255,.98) !important;
    outline-offset:2px !important;
    background-color:rgba(0,90,255,.07) !important;
  }

  html body .content > section,
  html body #highlights-section,
  html body #latest-section,
  html body #sensitive-section,
  html body .section{
    outline:4px solid rgba(128,0,255,.95) !important;
    outline-offset:-1px !important;
    background-color:rgba(128,0,255,.05) !important;
  }

  html body .section-head,
  html body .latest-section-head,
  html body .latest-head-row,
  html body .section-pager,
  html body .latest-filter-bar{
    outline:3px solid rgba(0,180,255,.95) !important;
    outline-offset:-1px !important;
    background-color:rgba(0,180,255,.06) !important;
  }

  html body .feature-grid,
  html body .masonry,
  html body .paged-grid,
  html body .masonry.paged-grid,
  html body [data-section="highlights"],
  html body [data-section="latest"],
  html body [data-section="sensitive"]{
    outline:4px solid rgba(255,64,128,.95) !important;
    outline-offset:-1px !important;
    background-color:rgba(255,64,128,.05) !important;
  }

  html body .feature-grid > *,
  html body .masonry > *,
  html body .paged-grid > *{
    outline:3px dashed rgba(40,40,40,.9) !important;
    outline-offset:0 !important;
    background-color:rgba(40,40,40,.04) !important;
  }

  html body .note,
  html body .empty-state,
  html body .onboarding-note{
    outline:4px solid rgba(255,215,0,.98) !important;
    outline-offset:-1px !important;
    box-shadow:inset 0 0 0 2px rgba(255,0,0,.35) !important;
  }

  html body .note-top,
  html body .identity,
  html body .action-row,
  html body .title,
  html body .body,
  html body .reply-label,
  html body .badge,
  html body .avatar{
    outline:2px dashed rgba(0,0,0,.45) !important;
    outline-offset:1px !important;
    background-color:rgba(255,255,255,.12) !important;
  }

  html body .board-footer,
  html body .visit-count,
  html body .floating-top,
  html body .toolbar{
    outline:3px solid rgba(20,20,20,.9) !important;
    outline-offset:-1px !important;
    background-color:rgba(20,20,20,.06) !important;
  }

  html body .paper-fold,
  html body .tape::before,
  html body .note::before,
  html body .note::after,
  html body .hero-actions::before,
  html body .hero-actions::after,
  html body .page::before{
    opacity:1 !important;
    filter:none !important;
  }
}


/* v75: in debug mode, remove the pink and purple wrapper frames around Board highlights / Latest notes / Unanswered notes */
@media (max-width:760px){
  /* remove purple section wrapper */
  html body .content > section,
  html body #highlights-section,
  html body #latest-section,
  html body #sensitive-section,
  html body .section{
    outline:none !important;
    background-color:transparent !important;
    border:none !important;
    box-shadow:none !important;
  }

  /* remove pink grid/masonry wrapper */
  html body .feature-grid,
  html body .masonry,
  html body .paged-grid,
  html body .masonry.paged-grid,
  html body [data-section="highlights"],
  html body [data-section="latest"],
  html body [data-section="sensitive"]{
    outline:none !important;
    background-color:transparent !important;
    border:none !important;
    box-shadow:none !important;
  }
}


/* v76: in debug mode, remove all red frames/highlights */
@media (max-width:760px){
  /* remove red outer debug frames */
  html body,
  html body .page,
  html body .board-wrap,
  html body .content{
    outline:none !important;
    background-color:transparent !important;
    border:none !important;
    box-shadow:none !important;
  }

  /* remove the red inset highlight from note cards */
  html body .note,
  html body .empty-state,
  html body .onboarding-note{
    box-shadow:none !important;
  }
}


/* v77: restore the real mobile board frame while keeping the removed debug colors gone */
@media (max-width:760px){
  html body .page{
    width:100% !important;
    margin:0 !important;
    padding:18px 14px 32px !important;
    position:relative !important;
    overflow:visible !important;
    background:
      radial-gradient(circle at 16% 10%, rgba(255,255,255,.08), transparent 19%),
      radial-gradient(circle at 82% 18%, rgba(255,255,255,.05), transparent 20%),
      linear-gradient(115deg, rgba(255,255,255,.025) 0 1px, transparent 1px 16px),
      radial-gradient(rgba(255,255,255,.08) .9px, transparent 1px),
      linear-gradient(180deg,var(--chalkboard),var(--chalkboard-2)) !important;
    background-size:auto, auto, 34px 34px, 18px 18px, auto !important;
    border:8px solid #c8872e !important;
    border-radius:0 !important;
    box-shadow:
      inset 0 0 0 2px rgba(255,226,137,.42),
      inset 0 0 40px rgba(0,0,0,.30) !important;
    outline:none !important;
  }

  html body .page::before{
    content:"" !important;
    position:absolute !important;
    inset:-8px !important;
    border-radius:0 !important;
    pointer-events:none !important;
    background:
      linear-gradient(90deg,rgba(255,226,118,.48),transparent 18%,rgba(80,38,11,.18) 52%,transparent 80%,rgba(255,226,118,.35)),
      repeating-linear-gradient(0deg,rgba(255,255,255,.10) 0 2px,transparent 2px 18px) !important;
    mix-blend-mode:multiply !important;
    opacity:.38 !important;
    z-index:0 !important;
  }

  html body .page > *{
    position:relative !important;
    z-index:1 !important;
  }
}


/* v78: turn off all debug border colors and widen mobile note sheets to match the first sticky sheet */
@media (max-width:760px){
  /* remove all remaining debug outlines/colors */
  html body .hero,
  html body .heading,
  html body .header-illustration,
  html body .brand-logo,
  html body .brand-mark,
  html body .hero-actions,
  html body .content > section,
  html body #highlights-section,
  html body #latest-section,
  html body #sensitive-section,
  html body .section,
  html body .section-head,
  html body .latest-section-head,
  html body .latest-head-row,
  html body .section-pager,
  html body .latest-filter-bar,
  html body .feature-grid,
  html body .masonry,
  html body .paged-grid,
  html body .masonry.paged-grid,
  html body [data-section="highlights"],
  html body [data-section="latest"],
  html body [data-section="sensitive"],
  html body .note,
  html body .empty-state,
  html body .onboarding-note,
  html body .board-footer,
  html body .visit-count,
  html body .floating-top,
  html body .toolbar{
    outline:none !important;
  }

  html body .hero-actions > *,
  html body .hero-actions .collections-menu,
  html body .hero-actions .mobile-language-picker,
  html body .hero-actions .hero-link-btn,
  html body .hero-actions .hero-coffee-link,
  html body .hero-actions #openComposeBtn,
  html body .hero-actions #openChatBtn,
  html body .hero-actions .mobile-language-select,
  html body .hero-actions .collections-menu summary,
  html body .feature-grid > *,
  html body .masonry > *,
  html body .paged-grid > *,
  html body .note-top,
  html body .identity,
  html body .action-row,
  html body .title,
  html body .body,
  html body .reply-label,
  html body .badge,
  html body .avatar{
    outline:none !important;
  }

  /* remove debug-only translucent fills without disturbing real surfaces */
  html body .hero,
  html body .heading,
  html body .header-illustration,
  html body .brand-logo,
  html body .brand-mark,
  html body .hero-actions,
  html body .section-head,
  html body .latest-section-head,
  html body .latest-head-row,
  html body .section-pager,
  html body .latest-filter-bar,
  html body .board-footer,
  html body .visit-count,
  html body .floating-top,
  html body .toolbar,
  html body .hero-actions > *,
  html body .hero-actions .collections-menu,
  html body .hero-actions .mobile-language-picker,
  html body .hero-actions .hero-link-btn,
  html body .hero-actions .hero-coffee-link,
  html body .hero-actions #openComposeBtn,
  html body .hero-actions #openChatBtn,
  html body .hero-actions .mobile-language-select,
  html body .hero-actions .collections-menu summary,
  html body .feature-grid > *,
  html body .masonry > *,
  html body .paged-grid > *{
    background-color:transparent !important;
  }

  /* widen section note sheets to match the first sticky sheet width */
  html body .content > section,
  html body #highlights-section,
  html body #latest-section,
  html body #sensitive-section{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  html body .section-head,
  html body .latest-section-head,
  html body .latest-filter-bar,
  html body .section-pager,
  html body .latest-head-row,
  html body .latest-inline-links{
    padding-left:14px !important;
    padding-right:14px !important;
    box-sizing:border-box !important;
  }

  html body .feature-grid,
  html body .masonry,
  html body .paged-grid,
  html body .masonry.paged-grid{
    display:grid !important;
    columns:unset !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    margin:0 !important;
    padding:0 !important;
    width:100% !important;
    box-sizing:border-box !important;
  }

  html body .feature-grid > *,
  html body .masonry > *,
  html body .paged-grid > *{
    width:100% !important;
    margin:0 !important;
    break-inside:avoid !important;
  }

  html body .note,
  html body .empty-state,
  html body .onboarding-note,
  html body .wide-note,
  html body .mini-note,
  html body .tall-note{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }
}


/* v79: restore sticky-note card backgrounds that were accidentally cleared in v78 */
@media (max-width:760px){
  /* keep debug mode off, but do NOT make actual note cards transparent */
  html body .feature-grid > .note,
  html body .masonry > .note,
  html body .paged-grid > .note,
  html body .masonry.paged-grid > .note,
  html body .feature-grid > .empty-state,
  html body .masonry > .empty-state,
  html body .paged-grid > .empty-state,
  html body .feature-grid > .onboarding-note,
  html body .masonry > .onboarding-note,
  html body .paged-grid > .onboarding-note,
  html body .note,
  html body .wide-note,
  html body .mini-note,
  html body .tall-note,
  html body .empty-state,
  html body .onboarding-note{
    background-color:initial !important;
    background-image:initial !important;
  }

  /* restore note-paper colors */
  html body .note.yellow{background:#f6e7aa !important;}
  html body .note.green{background:#e5efd9 !important;}
  html body .note.blue{background:#cdeeff !important;}
  html body .note.orange{background:#ffbf78 !important;}
  html body .note.red{background:#ff8f86 !important;}
  html body .note.navy{background:#315f95 !important;}
  html body .note.black{background:#2f2a25 !important;}
  html body .note.white{background:#fffdf8 !important;}
  html body .note.peach{background:#f7ddd3 !important;}
  html body .note.cream{background:#fbefcf !important;}
  html body .note.mint{background:#e4f0ea !important;}
  html body .note.paper{background:#fffdf8 !important;}

  html body .quote-note{
    background:linear-gradient(180deg,#fff7cf,#ffeec0) !important;
    border-color:rgba(201,158,77,.28) !important;
  }

  html body .empty-state{
    background:#fff8ef !important;
    border:2px dashed rgba(73,56,39,.18) !important;
  }

  html body .onboarding-note{
    background:linear-gradient(180deg,#fff8d5,#fef1bc) !important;
    border:2px solid rgba(201,158,77,.24) !important;
  }

  /* restore note texture/fold/tape visibility */
  html body .note::after,
  html body .note::before,
  html body .paper-fold,
  html body .tape::before,
  html body .onboarding-note::before,
  html body .empty-state::before{
    opacity:1 !important;
    visibility:visible !important;
  }
}


/* v80: fully restore all sticky-note sheets across all sections on mobile */
@media (max-width:760px){
  /* restore every note card container as a visible sticky note */
  html body article.note,
  html body .feature-grid > article.note,
  html body .masonry > article.note,
  html body .paged-grid > article.note,
  html body .masonry.paged-grid > article.note,
  html body article.note.compact,
  html body article.note.mini-note,
  html body article.note.tall-note,
  html body article.note.wide-note,
  html body article.note.quote-note,
  html body .note{
    border:2px solid rgba(92,69,39,.16) !important;
    border-radius:24px !important;
    box-shadow:0 12px 24px rgba(74,52,28,.10) !important;
    background-image:none !important;
    background-color:var(--paper) !important;
    overflow:visible !important;
    isolation:isolate !important;
  }

  /* restore paper colors explicitly with higher specificity */
  html body article.note.yellow,
  html body .masonry > article.note.yellow,
  html body .paged-grid > article.note.yellow,
  html body .feature-grid > article.note.yellow{background:#f6e7aa !important;}

  html body article.note.green,
  html body .masonry > article.note.green,
  html body .paged-grid > article.note.green,
  html body .feature-grid > article.note.green{background:#e5efd9 !important;}

  html body article.note.blue,
  html body .masonry > article.note.blue,
  html body .paged-grid > article.note.blue,
  html body .feature-grid > article.note.blue{background:#cdeeff !important;}

  html body article.note.orange,
  html body .masonry > article.note.orange,
  html body .paged-grid > article.note.orange,
  html body .feature-grid > article.note.orange{background:#ffbf78 !important;}

  html body article.note.red,
  html body .masonry > article.note.red,
  html body .paged-grid > article.note.red,
  html body .feature-grid > article.note.red{background:#ff8f86 !important;}

  html body article.note.navy,
  html body .masonry > article.note.navy,
  html body .paged-grid > article.note.navy,
  html body .feature-grid > article.note.navy{background:#315f95 !important;}

  html body article.note.black,
  html body .masonry > article.note.black,
  html body .paged-grid > article.note.black,
  html body .feature-grid > article.note.black{background:#2f2a25 !important;}

  html body article.note.white,
  html body .masonry > article.note.white,
  html body .paged-grid > article.note.white,
  html body .feature-grid > article.note.white{background:#fffdf8 !important;}

  html body article.note.peach,
  html body .masonry > article.note.peach,
  html body .paged-grid > article.note.peach,
  html body .feature-grid > article.note.peach{background:#f7ddd3 !important;}

  html body article.note.cream,
  html body .masonry > article.note.cream,
  html body .paged-grid > article.note.cream,
  html body .feature-grid > article.note.cream{background:#fbefcf !important;}

  html body article.note.mint,
  html body .masonry > article.note.mint,
  html body .paged-grid > article.note.mint,
  html body .feature-grid > article.note.mint{background:#e4f0ea !important;}

  html body article.note.paper,
  html body .masonry > article.note.paper,
  html body .paged-grid > article.note.paper,
  html body .feature-grid > article.note.paper{background:#fffdf8 !important;}

  html body article.note.paper.ruled,
  html body .masonry > article.note.paper.ruled,
  html body .paged-grid > article.note.paper.ruled,
  html body .feature-grid > article.note.paper.ruled{
    background-color:#fffdf8 !important;
    background-image:repeating-linear-gradient(180deg, transparent 0, transparent 27px, rgba(120,92,61,.12) 28px) !important;
  }

  html body article.note.quote-note,
  html body .masonry > article.note.quote-note,
  html body .paged-grid > article.note.quote-note,
  html body .feature-grid > article.note.quote-note{
    background:linear-gradient(180deg,#fff7cf,#ffeec0) !important;
    border-color:rgba(201,158,77,.28) !important;
  }

  html body .empty-state,
  html body .feature-grid > .empty-state,
  html body .masonry > .empty-state,
  html body .paged-grid > .empty-state{
    background:#fff8ef !important;
    border:2px dashed rgba(73,56,39,.18) !important;
    border-radius:22px !important;
    box-shadow:0 10px 18px rgba(74,52,28,.08) !important;
  }

  html body .onboarding-note,
  html body .feature-grid > .onboarding-note,
  html body .masonry > .onboarding-note,
  html body .paged-grid > .onboarding-note{
    background:linear-gradient(180deg,#fff8d5,#fef1bc) !important;
    border:2px solid rgba(201,158,77,.24) !important;
    border-radius:24px !important;
    box-shadow:0 10px 18px rgba(74,52,28,.08) !important;
  }

  /* restore note texture and decorations */
  html body article.note::before,
  html body article.note::after,
  html body .note::before,
  html body .note::after,
  html body .paper-fold,
  html body .tape::before,
  html body .empty-state::before,
  html body .onboarding-note::before{
    opacity:1 !important;
    visibility:visible !important;
    display:block !important;
  }
}





/* v82: remove selected review borders on mobile per feedback */
@media (max-width:760px){
  /* remove outer orange frame */
  html body .page{
    outline:none !important;
  }

  /* remove the large post-it / sticky-sheet frame */
  html body .hero-actions{
    outline:none !important;
  }

  /* remove blue frame around Collections */
  html body .hero-actions .collections-menu,
  html body .hero-actions .collections-menu summary{
    outline:none !important;
  }

  /* remove blue frame around Select language */
  html body .hero-actions .mobile-language-picker,
  html body .hero-actions .mobile-language-select{
    outline:none !important;
  }
}


/* v83: arrange mobile hero links in a simple top-to-bottom 1-2-3-4 order */
@media (max-width:760px){
  html body .page .hero .hero-actions{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:12px !important;
  }

  html body .page .hero #openComposeBtn,
  html body .page .hero .collections-menu,
  html body .page .hero #openChatBtn,
  html body .page .hero .mobile-language-picker{
    width:100% !important;
    max-width:none !important;
  }

  html body .page .hero #openComposeBtn{
    order:1 !important;
  }

  html body .page .hero .collections-menu{
    order:2 !important;
  }

  html body .page .hero #openChatBtn{
    order:3 !important;
  }

  html body .page .hero .mobile-language-picker{
    order:4 !important;
  }

  html body .page .hero .collections-menu summary,
  html body .page .hero .mobile-language-select,
  html body .page .hero #openChatBtn,
  html body .page .hero #openComposeBtn{
    width:100% !important;
  }

  /* keep any extra shortcuts after the first four links */
  html body .page .hero .hero-link-btn,
  html body .page .hero .hero-coffee-link,
  html body .page .hero .top-icon-menu:not(.collections-menu){
    order:10 !important;
  }
}


/* v84: make Select language single-line, remove globe icon, and tidy mobile link spacing */
@media (max-width:760px){
  html body .page .hero .hero-actions{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:16px !important;
    margin-top:24px !important;
    padding:18px 20px 18px !important;
  }

  html body .page .hero .hero-actions > *,
  html body .page .hero #openComposeBtn,
  html body .page .hero .collections-menu,
  html body .page .hero .collections-menu summary,
  html body .page .hero #openChatBtn,
  html body .page .hero .mobile-language-picker,
  html body .page .hero .hero-coffee-link{
    margin:0 !important;
  }

  html body .page .hero #openComposeBtn,
  html body .page .hero .collections-menu,
  html body .page .hero #openChatBtn,
  html body .page .hero .mobile-language-picker,
  html body .page .hero .hero-coffee-link{
    width:100% !important;
    max-width:none !important;
    align-self:flex-start !important;
  }

  html body .page .hero #openComposeBtn{order:1 !important;}
  html body .page .hero .collections-menu{order:2 !important;}
  html body .page .hero #openChatBtn{order:3 !important;}
  html body .page .hero .mobile-language-picker{order:4 !important;}
  html body .page .hero .hero-coffee-link{order:5 !important;}

  html body .page .hero .collections-menu summary,
  html body .page .hero #openChatBtn,
  html body .page .hero #openComposeBtn,
  html body .page .hero .hero-coffee-link{
    width:100% !important;
    line-height:1.28 !important;
  }

  html body .page .hero .mobile-language-picker{
    position:relative !important;
    display:block !important;
    min-height:1.4em !important;
  }

  html body .page .hero .mobile-language-picker label,
  html body .page .hero .mobile-language-picker::after{
    display:none !important;
    content:none !important;
  }

  html body .page .hero .mobile-language-picker::before{
    content:"Select language" !important;
    display:block !important;
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#5d4332 !important;
    font-family:"Noto Sans Thai","Inter",system-ui,sans-serif !important;
    font-size:15px !important;
    font-weight:800 !important;
    line-height:1.28 !important;
    text-align:left !important;
    text-decoration:underline !important;
    text-decoration-thickness:2px !important;
    text-underline-offset:4px !important;
    text-decoration-color:rgba(183,116,102,.42) !important;
    white-space:nowrap !important;
  }

  html body .page .hero .mobile-language-select{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    opacity:0 !important;
    cursor:pointer !important;
    z-index:2 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
  }
}


/* v85: mobile Collections submenu behaves like Select language */
.hero-actions .mobile-collections-picker{
  display:none;
}

@media (max-width:760px){
  .hero-actions .mobile-collections-picker{
    display:block !important;
    width:100%;
    position:relative;
  }

  .hero-actions .collections-menu{
    display:none !important;
  }

  html body .page .hero .mobile-collections-picker{
    order:2 !important;
    width:100% !important;
    max-width:none !important;
    align-self:flex-start !important;
    margin:0 !important;
    min-height:1.4em !important;
  }

  html body .page .hero .mobile-collections-picker label,
  html body .page .hero .mobile-collections-picker::after{
    display:none !important;
    content:none !important;
  }

  html body .page .hero .mobile-collections-picker::before{
    content:"Collections" !important;
    display:block !important;
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#5d4332 !important;
    font-family:"Noto Sans Thai","Inter",system-ui,sans-serif !important;
    font-size:15px !important;
    font-weight:800 !important;
    line-height:1.28 !important;
    text-align:left !important;
    text-decoration:underline !important;
    text-decoration-thickness:2px !important;
    text-underline-offset:4px !important;
    text-decoration-color:rgba(183,116,102,.42) !important;
    white-space:nowrap !important;
  }

  html body .page .hero .mobile-collections-select{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    opacity:0 !important;
    cursor:pointer !important;
    z-index:2 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    appearance:none !important;
    -webkit-appearance:none !important;
  }

  /* update ordering now that mobile collections picker replaces the details menu */
  html body .page .hero #openComposeBtn{order:1 !important;}
  html body .page .hero .mobile-collections-picker{order:2 !important;}
  html body .page .hero #openChatBtn{order:3 !important;}
  html body .page .hero .mobile-language-picker{order:4 !important;}
  html body .page .hero .hero-coffee-link{order:5 !important;}
}


/* v86: enlarge top mobile links and make hero logo smaller/in front of title */
@media (max-width:760px){
  /* stronger, larger top links */
  html body .page .hero #openComposeBtn,
  html body .page .hero #openChatBtn,
  html body .page .hero .hero-coffee-link,
  html body .page .hero .mobile-language-picker::before,
  html body .page .hero .mobile-collections-picker::before,
  html body .page .hero .collections-menu summary{
    font-size:18px !important;
    font-weight:900 !important;
    line-height:1.32 !important;
    letter-spacing:-0.01em !important;
  }

  html body .page .hero .hero-actions{
    gap:18px !important;
    padding:18px 20px 18px !important;
  }

  /* move and shrink circular logo so it sits in front of the title */
  html body .page .hero{
    position:relative !important;
  }

  html body .page .hero .heading{
    position:relative !important;
    padding-left:84px !important;
    min-height:88px !important;
  }

  html body .page .hero .heading .hero-kicker{
    margin-bottom:10px !important;
  }

  html body .page .hero .heading h1{
    max-width:250px !important;
    font-size:clamp(16px, 4.9vw, 22px) !important;
    line-height:1.08 !important;
  }

  html body .page .hero .header-illustration{
    position:absolute !important;
    top:58px !important;
    left:18px !important;
    width:56px !important;
    margin:0 !important;
    padding:0 !important;
    z-index:2 !important;
  }

  html body .page .hero .brand-mark{
    width:56px !important;
    height:56px !important;
  }

  html body .page .hero .brand-ring{
    border-width:2px !important;
  }

  html body .page .hero .brand-note{
    width:29px !important;
    height:29px !important;
    left:13px !important;
    top:12px !important;
    border-radius:10px !important;
  }

  html body .page .hero .brand-heart{
    right:4px !important;
    top:4px !important;
    width:20px !important;
    height:20px !important;
    font-size:10px !important;
  }

  html body .page .hero .hero-actions{
    margin-top:22px !important;
  }
}


/* v87: remove round logo and enlarge/center mobile title */
@media (max-width:760px){
  html body .page .hero .header-illustration{
    display:none !important;
  }

  html body .page .hero .heading{
    padding-left:0 !important;
    min-height:auto !important;
    max-width:none !important;
    width:100% !important;
    text-align:center !important;
  }

  html body .page .hero .heading .hero-kicker{
    text-align:center !important;
    margin:0 0 12px !important;
  }

  html body .page .hero .heading h1{
    max-width:none !important;
    width:100% !important;
    margin:0 auto !important;
    text-align:center !important;
    font-size:clamp(24px, 7.6vw, 34px) !important;
    line-height:1.08 !important;
    letter-spacing:-0.02em !important;
  }

  html body .page .hero .heading .hero-title-main,
  html body .page .hero .heading .hero-title-sub{
    display:inline !important;
  }

  html body .page .hero .heading .hero-title-main{
    margin:0 !important;
  }

  html body .page .hero .heading h1::after{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    width:160px !important;
    bottom:-10px !important;
  }

  html body .page .hero .hero-actions{
    margin-top:30px !important;
  }
}


/* v88: remove all added colored review borders */
@media (max-width:760px){
  html body .page,
  html body .hero,
  html body .hero-actions,
  html body .hero-actions > *,
  html body .hero-actions .collections-menu,
  html body .hero-actions .collections-menu summary,
  html body .hero-actions .mobile-language-picker,
  html body .hero-actions .mobile-language-select,
  html body .hero-actions .mobile-collections-picker,
  html body .hero-actions .mobile-collections-select,
  html body .hero-actions .hero-link-btn,
  html body .hero-actions .hero-coffee-link,
  html body .content > section,
  html body #highlights-section,
  html body #latest-section,
  html body #sensitive-section,
  html body .section,
  html body .section-head,
  html body .latest-section-head,
  html body .latest-head-row,
  html body .section-pager,
  html body .latest-filter-bar,
  html body .latest-inline-links,
  html body article.note,
  html body .feature-grid > article.note,
  html body .masonry > article.note,
  html body .paged-grid > article.note,
  html body .masonry.paged-grid > article.note,
  html body article.note.compact,
  html body article.note.mini-note,
  html body article.note.tall-note,
  html body article.note.wide-note,
  html body article.note.quote-note,
  html body .note,
  html body .empty-state,
  html body .onboarding-note,
  html body .board-footer,
  html body .visit-count,
  html body .floating-top,
  html body .toolbar,
  html body .modal-card,
  html body .chat-card{
    outline:none !important;
  }

  html body article.note.yellow,
  html body .feature-grid > article.note.yellow,
  html body .masonry > article.note.yellow,
  html body .paged-grid > article.note.yellow,
  html body .note.yellow,
  html body article.note.green,
  html body .feature-grid > article.note.green,
  html body .masonry > article.note.green,
  html body .paged-grid > article.note.green,
  html body .note.green,
  html body article.note.blue,
  html body .feature-grid > article.note.blue,
  html body .masonry > article.note.blue,
  html body .paged-grid > article.note.blue,
  html body .note.blue,
  html body article.note.orange,
  html body .feature-grid > article.note.orange,
  html body .masonry > article.note.orange,
  html body .paged-grid > article.note.orange,
  html body .note.orange,
  html body article.note.red,
  html body .feature-grid > article.note.red,
  html body .masonry > article.note.red,
  html body .paged-grid > article.note.red,
  html body .note.red,
  html body article.note.navy,
  html body .feature-grid > article.note.navy,
  html body .masonry > article.note.navy,
  html body .paged-grid > article.note.navy,
  html body .note.navy,
  html body article.note.black,
  html body .feature-grid > article.note.black,
  html body .masonry > article.note.black,
  html body .paged-grid > article.note.black,
  html body .note.black,
  html body article.note.white,
  html body .feature-grid > article.note.white,
  html body .masonry > article.note.white,
  html body .paged-grid > article.note.white,
  html body .note.white,
  html body article.note.paper,
  html body .feature-grid > article.note.paper,
  html body .masonry > article.note.paper,
  html body .paged-grid > article.note.paper,
  html body .note.paper,
  html body article.note.peach,
  html body .feature-grid > article.note.peach,
  html body .masonry > article.note.peach,
  html body .paged-grid > article.note.peach,
  html body .note.peach,
  html body article.note.cream,
  html body .feature-grid > article.note.cream,
  html body .masonry > article.note.cream,
  html body .paged-grid > article.note.cream,
  html body .note.cream,
  html body article.note.mint,
  html body .feature-grid > article.note.mint,
  html body .masonry > article.note.mint,
  html body .paged-grid > article.note.mint,
  html body .note.mint{
    border-color:initial !important;
  }
}


/* v90: remove rounded corner from the top frame so "Feelings board" is not clipped */
@media (max-width:760px){
  html body .page,
  html body .page::before,
  html body .page::after{
    border-radius:0 !important;
  }
}


/* v91: force the top board/header frame to have no rounded corners so "Feelings board" is not clipped */
@media (max-width:760px){
  html body .page,
  html body .page::before,
  html body .page::after,
  html body .page .hero,
  html body .page .hero::before,
  html body .page .hero::after{
    border-radius:0 !important;
  }

  html body .page .hero{
    overflow:visible !important;
  }

  html body .page .hero .heading,
  html body .page .hero .heading .hero-kicker,
  html body .page .hero .heading h1{
    position:relative !important;
    z-index:3 !important;
  }
}


/* v92: make Enter button visible and center Send button on mobile chat */
@media (max-width:760px){
  /* First screen: make Enter public room button clearly visible */
  #chatModal .chat-intro-actions{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    width:100% !important;
    margin-top:10px !important;
  }

  #chatModal #chatEnterRoomBtn,
  #chatModal .chat-intro-actions .primary,
  #chatModal .chat-intro-actions .btn.primary{
    width:auto !important;
    min-width:220px !important;
    max-width:100% !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 auto !important;
    padding:0 28px !important;
    min-height:52px !important;
    border-radius:999px !important;
    background:#f6eed9 !important;
    background-image:none !important;
    border:2px solid rgba(213,129,113,.70) !important;
    color:#2f241c !important;
    box-shadow:0 8px 18px rgba(0,0,0,.10) !important;
    font-size:18px !important;
    font-weight:900 !important;
    text-align:center !important;
    white-space:nowrap !important;
    opacity:1 !important;
  }

  /* Chat room screen: center Send message button */
  #chatModal .chat-modal-actions{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    width:100% !important;
    margin:0 auto !important;
    padding:0 !important;
  }

  #chatModal #sendChatMessageBtn,
  #chatModal .chat-modal-actions .primary,
  #chatModal .chat-modal-actions .btn.primary,
  #chatModal .chat-send-primary{
    width:auto !important;
    min-width:230px !important;
    max-width:100% !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 auto !important;
    padding:0 28px !important;
    min-height:52px !important;
    border-radius:999px !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:1.5px solid rgba(255,248,220,.28) !important;
    color:#fff7eb !important;
    box-shadow:none !important;
    text-align:center !important;
    white-space:nowrap !important;
  }
}

/* v93: remove duplicate coffee CTA on desktop; keep only the top-right coffee CTA */
@media (min-width:761px){
  html body .page .hero .hero-actions .hero-coffee-link,
  html body .hero-actions #coffeeQuickLink{
    display:none !important;
  }
}


/* v89: Arabic phone notes sections use the same mobile sizing/spacing as English while keeping RTL */
@media (max-width:760px){
  html[lang="ar"] .board-wrap{
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
    margin-top:0 !important;
  }

  html[lang="ar"] .content{
    gap:12px !important;
  }

  html[lang="ar"] .content > section,
  html[lang="ar"] #highlights-section,
  html[lang="ar"] #latest-section,
  html[lang="ar"] #sensitive-section{
    padding:16px 14px !important;
    border-radius:26px !important;
  }

  html[lang="ar"] .section-head,
  html[lang="ar"] .latest-section-head{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:10px !important;
    margin-bottom:10px !important;
    padding-inline:0 !important;
  }

  html[lang="ar"] .section-head h2,
  html[lang="ar"] .section-head h4,
  html[lang="ar"] .latest-head-row h4{
    font-size:clamp(24px, 8vw, 34px) !important;
    line-height:1.07 !important;
    padding-bottom:0 !important;
  }

  html[lang="ar"] .section-head h2::after,
  html[lang="ar"] .section-head h4::after{
    width:120px !important;
    height:3px !important;
    bottom:-3px !important;
  }

  html[lang="ar"] .section-pager{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr auto 1fr !important;
    align-items:center !important;
    gap:8px !important;
  }

  html[lang="ar"] .pager-btn{
    min-height:40px !important;
    padding:9px 12px !important;
    font-size:13px !important;
  }

  html[lang="ar"] .pager-info{
    font-size:14px !important;
  }

  html[lang="ar"] #latest-section .latest-section-head{
    margin-bottom:10px !important;
  }

  html[lang="ar"] #latest-section .latest-head-row{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
  }

  html[lang="ar"] #latest-section .latest-inline-links{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  html[lang="ar"] #latest-section .latest-inline-links .hero-link-btn{
    min-height:40px !important;
    padding:10px 12px !important;
    border-radius:14px !important;
    font-size:12.5px !important;
    line-height:1.2 !important;
    border:1px solid rgba(247,241,223,.10) !important;
    background:rgba(255,255,255,.05) !important;
    color:#f8eee0 !important;
    box-shadow:none !important;
    text-decoration:none !important;
  }

  html[lang="ar"] #latest-section .latest-filter-bar,
  html[lang="ar"] #latest-section .latest-filter-bar.is-active{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin:0 0 10px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  html[lang="ar"] #latest-section .latest-filter-chip,
  html[lang="ar"] #latest-section .latest-filter-clear{
    width:auto !important;
    justify-content:center !important;
    text-align:center !important;
    direction:rtl !important;
    min-height:38px !important;
    padding:8px 12px !important;
    border-radius:14px !important;
    font-size:12px !important;
    line-height:1.2 !important;
  }

  html[lang="ar"] .masonry.paged-grid{
    gap:10px !important;
  }

  html[lang="ar"] .note,
  html[lang="ar"] .wide-note,
  html[lang="ar"] .mini-note,
  html[lang="ar"] .tall-note{
    min-height:0 !important;
    padding:16px 14px !important;
    border-radius:24px !important;
  }

  html[lang="ar"] article.note.wide-note{min-height:236px !important;}
  html[lang="ar"] article.note.tall-note{min-height:278px !important;}
  html[lang="ar"] article.note.mini-note{min-height:170px !important;}

  html[lang="ar"] .note-top,
  html[lang="ar"] .identity{
    gap:10px !important;
    align-items:flex-start !important;
  }

  html[lang="ar"] .avatar{
    width:46px !important;
    height:46px !important;
    font-size:20px !important;
  }

  html[lang="ar"] .name{
    font-size:16px !important;
    line-height:1.08 !important;
  }

  html[lang="ar"] .meta{
    margin-top:5px !important;
    font-size:11px !important;
    line-height:1.35 !important;
  }

  html[lang="ar"] .badge{
    font-size:10px !important;
    padding:7px 10px !important;
  }

  html[lang="ar"] .title{
    margin-top:12px !important;
    font-size:clamp(19px, 7.4vw, 26px) !important;
    line-height:1.15 !important;
    letter-spacing:-.04em !important;
  }

  html[lang="ar"] .body{
    margin-top:9px !important;
    font-size:14.5px !important;
    line-height:1.6 !important;
  }

  html[lang="ar"] .reply-label{
    margin-top:10px !important;
    font-size:11.5px !important;
    line-height:1.35 !important;
  }

  html[lang="ar"] .action-row{
    margin-top:10px !important;
    gap:8px !important;
  }

  html[lang="ar"] .reply-btn,
  html[lang="ar"] .tiny-btn,
  html[lang="ar"] .read-btn,
  html[lang="ar"] .edit-btn,
  html[lang="ar"] .delete-btn,
  html[lang="ar"] .report-btn,
  html[lang="ar"] .post-text-action,
  html[lang="ar"] .note-support-action{
    min-height:40px !important;
    padding:9px 13px !important;
    border-radius:14px !important;
    font-size:12.5px !important;
  }

  html[lang="ar"] .board-footer{
    margin-top:2px !important;
    padding:10px 8px 4px !important;
    font-size:11px !important;
    line-height:1.5 !important;
  }

  html[lang="ar"] .visit-count{
    margin:0 auto 6px !important;
    padding:6px 10px !important;
    font-size:11px !important;
  }
}


/* v94: normalize Arabic UI to the English master sizing/layout while keeping Arabic copy + RTL */
html[lang="ar"]{
  --ui-line-height:1.55;
  --display-line-height:1.16;
}

html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea{
  font-family:var(--font-ui-ar) !important;
}

html[lang="ar"] .heading h1,
html[lang="ar"] .section-head h2,
html[lang="ar"] .section-head h4,
html[lang="ar"] .brand-title,
html[lang="ar"] .brand-kicker,
html[lang="ar"] .board-footer,
html[lang="ar"] .footer-card h5,
html[lang="ar"] .top-icon-menu summary,
html[lang="ar"] .btn,
html[lang="ar"] .dropdown-item,
html[lang="ar"] .hero-link-btn,
html[lang="ar"] .brand-sub{
  font-family:var(--font-display-ar) !important;
  letter-spacing:normal !important;
  text-transform:none !important;
}

html[lang="ar"] .hero-summary,
html[lang="ar"] .modal-body,
html[lang="ar"] .modal-copy,
html[lang="ar"] .note .body,
html[lang="ar"] .note .meta,
html[lang="ar"] .note .reply-label,
html[lang="ar"] .note .note-support-item,
html[lang="ar"] .dropdown-item,
html[lang="ar"] .top-icon-menu summary,
html[lang="ar"] .brand-sub,
html[lang="ar"] .visit-count,
html[lang="ar"] .storage-status,
html[lang="ar"] .pager,
html[lang="ar"] .pager-btn,
html[lang="ar"] .toast,
html[lang="ar"] .read-modal-body,
html[lang="ar"] .read-modal-meta,
html[lang="ar"] .read-modal-actions .btn,
html[lang="ar"] .support-list,
html[lang="ar"] .support-item,
html[lang="ar"] .compose-form,
html[lang="ar"] .reply-form,
html[lang="ar"] .support-helper,
html[lang="ar"] .composer-helper,
html[lang="ar"] .confirm-copy,
html[lang="ar"] .report-copy{
  line-height:var(--ui-line-height) !important;
}

html[lang="ar"] .heading h1,
html[lang="ar"] .section-head h2,
html[lang="ar"] .section-head h4,
html[lang="ar"] .brand-title,
html[lang="ar"] .brand-kicker,
html[lang="ar"] .footer-card h5,
html[lang="ar"] .modal-title,
html[lang="ar"] .note .title,
html[lang="ar"] .note .name{
  line-height:var(--display-line-height) !important;
}

html[lang="ar"] .section-head h2,
html[lang="ar"] .section-head h4,
html[lang="ar"] .latest-head-row h4{
  font-size:clamp(25px, 2.8vw, 38px) !important;
  padding:0 0 8px !important;
}

html[lang="ar"] .latest-inline-link{
  font-size:clamp(14px, 0.95vw, 17px) !important;
  line-height:1.2 !important;
}

html[lang="ar"] .note .title,
html[lang="ar"] .title{
  font-size:clamp(22px, 1.65vw, 27px) !important;
  line-height:1.16 !important;
  font-weight:900 !important;
  text-transform:none !important;
}

html[lang="ar"] .note .body,
html[lang="ar"] .body{
  font-size:15px !important;
  line-height:1.68 !important;
  font-weight:650 !important;
}

html[lang="ar"] .note .name,
html[lang="ar"] .name{
  font-size:13px !important;
  line-height:1.22 !important;
  font-weight:900 !important;
}

html[lang="ar"] .note .meta,
html[lang="ar"] .meta,
html[lang="ar"] .note .reply-label,
html[lang="ar"] .reply-label{
  font-size:12px !important;
  line-height:1.45 !important;
}

html[lang="ar"] .board-footer{
  display:block !important;
  margin-top:14px !important;
  padding:2px 6px 0 !important;
  font-size:12px !important;
  line-height:1.55 !important;
  text-align:center !important;
}

html[lang="ar"] .visit-count{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  margin:8px 0 0 !important;
  padding:4px 10px !important;
  font-size:12px !important;
}


@media (max-width: 760px){
  html[lang="ar"] .page{
    padding-bottom:34px !important;
  }

  html[lang="ar"] .page .heading{
    margin-bottom:2px !important;
  }

  html[lang="ar"] .page .hero,
  html[lang="ar"] body .page > .hero{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  html[lang="ar"] .page .hero > .header-illustration{
    display:flex !important;
    justify-content:flex-start !important;
  }

  html[lang="ar"] .page .hero .brand-logo{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:56px minmax(0, 1fr) !important;
    column-gap:14px !important;
    align-items:start !important;
    padding-right:0 !important;
    justify-content:flex-start !important;
  }

  html[lang="ar"] .page .hero .brand-copy{
    max-width:100% !important;
    align-items:flex-start !important;
    text-align:right !important;
  }

  html[lang="ar"] .page .hero .brand-kicker{
    display:block !important;
    width:100% !important;
    font-size:16px !important;
    line-height:1.2 !important;
    white-space:normal !important;
  }

  html[lang="ar"] .page .hero .brand-title{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    font-size:clamp(15px, 4.8vw, 20px) !important;
    line-height:1.32 !important;
    letter-spacing:0 !important;
    white-space:normal !important;
    margin-top:2px !important;
  }

  html[lang="ar"] .page .hero .brand-title span{
    display:block !important;
    white-space:normal !important;
    max-inline-size:100% !important;
  }

  html[lang="ar"] .page .hero .brand-sub{
    width:100% !important;
    max-width:100% !important;
    justify-content:flex-start !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  html[lang="ar"] .page .hero .heading h1{
    font-size:clamp(24px, 6vw, 34px) !important;
    line-height:1.05 !important;
    letter-spacing:-0.03em !important;
    white-space:normal !important;
    padding:0 !important;
  }

  html[lang="ar"] .page .hero .hero-kicker{
    font-size:12px !important;
  }

  html[lang="ar"] .page .hero > .hero-actions{
    flex-direction:column !important;
    gap:12px !important;
  }

  html[lang="ar"] .page .hero .hero-actions .btn,
  html[lang="ar"] .page .hero .hero-actions .hero-link-btn,
  html[lang="ar"] .page .hero .hero-actions .top-icon-menu summary,
  html[lang="ar"] .page .hero .hero-actions #openComposeBtn{
    font-size:clamp(14px, 3.5vw, 16px) !important;
  }

  html[lang="ar"] .page .hero .top-dropdown-list .dropdown-item{
    justify-content:flex-start !important;
    text-align:right !important;
  }

  html[lang="ar"] .board-footer{
    text-align:center !important;
  }

  html[lang="ar"] .visit-count{
    display:flex !important;
    width:max-content !important;
    max-width:100% !important;
    margin:8px auto 0 !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
  }

  html[lang="ar"] .section-head h2,
  html[lang="ar"] .section-head h4,
  html[lang="ar"] .latest-head-row h4{
    font-size:clamp(25px, 2.8vw, 38px) !important;
    line-height:1.16 !important;
  }

  html[lang="ar"] .latest-inline-link{
    font-size:clamp(14px, 3.5vw, 16px) !important;
  }
}

@media (max-width: 420px){
  html[lang="ar"] .page{
    padding-left:8px !important;
    padding-right:8px !important;
  }

  html[lang="ar"] .page .hero .hero-kicker{
    font-size:12px !important;
  }

  html[lang="ar"] .page .hero .hero-actions .btn,
  html[lang="ar"] .page .hero .hero-actions .hero-link-btn,
  html[lang="ar"] .page .hero .hero-actions .top-icon-menu summary{
    font-size:12.5px !important;
  }

  html[lang="ar"] .page .hero .brand-title{
    font-size:13.5px !important;
    line-height:1.3 !important;
  }

  html[lang="ar"] .page .hero .brand-sub{
    font-size:12.5px !important;
  }
}


/* v90: Arabic mobile parity pass – match English mobile composition while keeping Arabic copy readable. */
@media (max-width:760px){
  html[lang="ar"] body .page .hero,
  html[lang="ar"] body .page > .hero{
    direction:ltr !important;
  }

  html[lang="ar"] body .page .hero .header-illustration{
    display:none !important;
  }

  html[lang="ar"] body .page .hero .heading{
    width:100% !important;
    max-width:none !important;
    min-height:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    text-align:center !important;
    direction:rtl !important;
  }

  html[lang="ar"] body .page .hero .heading .hero-kicker{
    display:block !important;
    width:max-content !important;
    max-width:100% !important;
    margin:0 0 12px auto !important;
    text-align:right !important;
    direction:rtl !important;
  }

  html[lang="ar"] body .page .hero .heading h1{
    width:100% !important;
    max-width:none !important;
    margin:0 auto !important;
    text-align:center !important;
    direction:ltr !important;
    font-size:clamp(24px, 7.6vw, 34px) !important;
    line-height:1.08 !important;
    letter-spacing:-0.02em !important;
    white-space:normal !important;
  }

  html[lang="ar"] body .page .hero .heading .hero-title-main,
  html[lang="ar"] body .page .hero .heading .hero-title-sub{
    display:inline !important;
  }

  html[lang="ar"] body .page .hero .heading h1::after{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    width:160px !important;
    bottom:-10px !important;
  }

  html[lang="ar"] body .page .hero .hero-actions{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:16px !important;
    margin-top:30px !important;
    padding:18px 20px 18px !important;
    direction:ltr !important;
    text-align:left !important;
  }

  html[lang="ar"] body .page .hero #openComposeBtn,
  html[lang="ar"] body .page .hero .mobile-collections-picker,
  html[lang="ar"] body .page .hero #openChatBtn,
  html[lang="ar"] body .page .hero .mobile-language-picker,
  html[lang="ar"] body .page .hero .hero-coffee-link{
    width:100% !important;
    max-width:none !important;
    align-self:flex-start !important;
    margin:0 !important;
  }

  html[lang="ar"] body .page .hero #openComposeBtn{order:1 !important;}
  html[lang="ar"] body .page .hero .mobile-collections-picker{order:2 !important;}
  html[lang="ar"] body .page .hero #openChatBtn{order:3 !important;}
  html[lang="ar"] body .page .hero .mobile-language-picker{order:4 !important;}
  html[lang="ar"] body .page .hero .hero-coffee-link{order:5 !important;}

  html[lang="ar"] body .page .hero #openComposeBtn,
  html[lang="ar"] body .page .hero #openChatBtn,
  html[lang="ar"] body .page .hero .hero-coffee-link,
  html[lang="ar"] body .page .hero .mobile-language-picker::before,
  html[lang="ar"] body .page .hero .mobile-collections-picker::before{
    font-size:18px !important;
    font-weight:900 !important;
    line-height:1.32 !important;
    letter-spacing:-0.01em !important;
  }

  html[lang="ar"] body .page .hero .mobile-language-picker,
  html[lang="ar"] body .page .hero .mobile-collections-picker{
    position:relative !important;
    display:block !important;
    min-height:1.4em !important;
    direction:ltr !important;
    text-align:left !important;
  }

  html[lang="ar"] body .page .hero .mobile-language-picker label,
  html[lang="ar"] body .page .hero .mobile-collections-picker label,
  html[lang="ar"] body .page .hero .mobile-language-picker::after,
  html[lang="ar"] body .page .hero .mobile-collections-picker::after{
    display:none !important;
    content:none !important;
  }

  html[lang="ar"] body .page .hero .mobile-language-picker::before,
  html[lang="ar"] body .page .hero .mobile-collections-picker::before{
    content:attr(data-label) !important;
    display:block !important;
    position:relative !important;
    inset:auto !important;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#5d4332 !important;
    font-family:"Noto Sans Arabic","Noto Sans","Inter",system-ui,sans-serif !important;
    text-align:left !important;
    text-decoration:underline !important;
    text-decoration-thickness:2px !important;
    text-underline-offset:4px !important;
    text-decoration-color:rgba(183,116,102,.42) !important;
    white-space:nowrap !important;
  }

  html[lang="ar"] body .page .hero .mobile-language-select,
  html[lang="ar"] body .page .hero .mobile-collections-select{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    opacity:0 !important;
    cursor:pointer !important;
    z-index:2 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  html[lang="ar"] body .page .section-head,
  html[lang="ar"] body .page .latest-section-head,
  html[lang="ar"] body .page .latest-head-row{
    direction:ltr !important;
  }

  html[lang="ar"] body .page .section-head h2,
  html[lang="ar"] body .page .section-head h4,
  html[lang="ar"] body .page .latest-head-row h4{
    font-family:var(--font-display-ar) !important;
    font-size:clamp(25px, 2.8vw, 38px) !important;
    line-height:1.16 !important;
    text-align:left !important;
  }

  html[lang="ar"] body .page .section-pager{
    direction:ltr !important;
    flex-direction:row !important;
  }

  html[lang="ar"] body .page article.note{
    direction:ltr !important;
    text-align:left !important;
  }

  html[lang="ar"] body .page article.note .note-top{
    direction:ltr !important;
    flex-direction:row !important;
    justify-content:space-between !important;
    align-items:flex-start !important;
    gap:8px !important;
    padding-left:8px !important;
    padding-right:0 !important;
  }

  html[lang="ar"] body .page article.note .identity{
    direction:ltr !important;
    flex-direction:row !important;
    gap:10px !important;
    align-items:flex-start !important;
  }

  html[lang="ar"] body .page article.note .avatar,
  html[lang="ar"] body .page article.note .badge,
  html[lang="ar"] body .page article.note .post-text-actions,
  html[lang="ar"] body .page article.note .note-support-actions{
    order:initial !important;
  }

  html[lang="ar"] body .page article.note .name,
  html[lang="ar"] body .page article.note .meta,
  html[lang="ar"] body .page article.note .title,
  html[lang="ar"] body .page article.note .body,
  html[lang="ar"] body .page article.note .reply-label,
  html[lang="ar"] body .page article.note .note-support-item,
  html[lang="ar"] body .page article.note .only-text{
    direction:rtl !important;
    text-align:right !important;
    unicode-bidi:plaintext !important;
  }

  html[lang="ar"] body .page article.note .badge{
    direction:rtl !important;
    text-align:center !important;
    max-width:42% !important;
    white-space:normal !important;
    line-height:1.25 !important;
  }

  html[lang="ar"] body .page article.note .title{
    font-size:clamp(22px, 7vw, 28px) !important;
    line-height:1.08 !important;
  }

  html[lang="ar"] body .page article.note .body{
    font-size:14px !important;
    line-height:1.68 !important;
  }

  html[lang="ar"] body .page article.note .action-row,
  html[lang="ar"] body .page article.note .post-owner-actions{
    direction:ltr !important;
    justify-content:flex-start !important;
    gap:8px !important;
  }

  html[lang="ar"] body .page article.note .reply-btn,
  html[lang="ar"] body .page article.note .tiny-btn,
  html[lang="ar"] body .page article.note .read-btn{
    min-height:42px !important;
    padding:8px 11px !important;
    white-space:normal !important;
    direction:ltr !important;
  }

  html[lang="ar"] body .page article.note .reply-btn .reply-icon{
    transform:none !important;
  }
}





/* v2.3.8: Arabic mobile hero/actions + notes refinement */
@media (max-width:760px){
  /* Make the first sticky sheet wider and cleaner */
  html[lang="ar"] body .page .hero > .hero-actions,
  html[lang="ar"] body .page .hero .hero-actions{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:14px !important;
    width:calc(100% + 16px) !important;
    max-width:none !important;
    margin-inline:-8px !important;
    margin-top:26px !important;
    padding:20px 20px 18px !important;
    direction:rtl !important;
    text-align:right !important;
  }

  /* Place the links neatly on the right side of the first sticky sheet */
  html[lang="ar"] body .page .hero #openComposeBtn,
  html[lang="ar"] body .page .hero .mobile-collections-picker,
  html[lang="ar"] body .page .hero .language-menu,
  html[lang="ar"] body .page .hero #openChatBtn,
  html[lang="ar"] body .page .hero .hero-coffee-link{
    width:100% !important;
    max-width:none !important;
    align-self:stretch !important;
    margin:0 !important;
  }

  html[lang="ar"] body .page .hero #openComposeBtn{order:1 !important;}
  html[lang="ar"] body .page .hero .mobile-collections-picker{order:2 !important;}
  html[lang="ar"] body .page .hero .language-menu{order:3 !important; display:block !important;}
  html[lang="ar"] body .page .hero #openChatBtn{order:4 !important;}
  html[lang="ar"] body .page .hero .hero-coffee-link{order:5 !important;}

  /* Hide the old mobile language picker and globe row */
  html[lang="ar"] body .page .hero .mobile-language-picker,
  html[lang="ar"] body .page .hero .mobile-language-select{
    display:none !important;
  }

  /* Use clean text links with larger bold text */
  html[lang="ar"] body .page .hero #openComposeBtn,
  html[lang="ar"] body .page .hero #openChatBtn,
  html[lang="ar"] body .page .hero .hero-coffee-link,
  html[lang="ar"] body .page .hero .language-menu summary,
  html[lang="ar"] body .page .hero .mobile-collections-picker::before{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    width:100% !important;
    min-height:30px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    color:#5a4030 !important;
    font-family:"Noto Sans Arabic","Noto Sans","Inter",system-ui,sans-serif !important;
    font-size:21px !important;
    font-weight:900 !important;
    line-height:1.32 !important;
    letter-spacing:0 !important;
    text-align:right !important;
    direction:rtl !important;
    text-decoration:underline !important;
    text-decoration-thickness:2px !important;
    text-underline-offset:6px !important;
    text-decoration-color:rgba(183,116,102,.42) !important;
    white-space:normal !important;
  }

  html[lang="ar"] body .page .hero #openChatBtn{
    flex-direction:row-reverse !important;
    gap:8px !important;
  }

  html[lang="ar"] body .page .hero #openChatBtn .chat-launch-icon{
    margin:0 !important;
    font-size:20px !important;
  }

  /* Remove the globe / current flag and keep only the text link */
  html[lang="ar"] body .page .hero .language-menu summary .language-current-flag,
  html[lang="ar"] body .page .hero .language-menu summary .top-icon-badge{
    display:none !important;
  }

  html[lang="ar"] body .page .hero .language-menu summary::-webkit-details-marker{
    display:none !important;
  }

  html[lang="ar"] body .page .hero .language-menu[open] .language-dropdown-list{
    inset-inline-end:0 !important;
    inset-inline-start:auto !important;
    min-width:min(84vw, 260px) !important;
    direction:rtl !important;
    text-align:right !important;
  }

  html[lang="ar"] body .page .hero .language-dropdown-list .dropdown-item{
    justify-content:flex-end !important;
    text-align:right !important;
    direction:rtl !important;
    gap:10px !important;
  }

  /* Keep the collections control as a text link while preserving the native select behavior */
  html[lang="ar"] body .page .hero .mobile-collections-picker{
    position:relative !important;
    display:block !important;
    direction:rtl !important;
    text-align:right !important;
  }

  html[lang="ar"] body .page .hero .mobile-collections-picker label,
  html[lang="ar"] body .page .hero .mobile-collections-picker::after{
    display:none !important;
    content:none !important;
  }

  html[lang="ar"] body .page .hero .mobile-collections-picker::before{
    content:attr(data-label) !important;
  }

  html[lang="ar"] body .page .hero .mobile-collections-select{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    opacity:0 !important;
    cursor:pointer !important;
    z-index:2 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
  }

  /* Make spacing between first-sheet links comfortable */
  html[lang="ar"] body .page .hero .hero-actions > * + *{
    margin-top:2px !important;
  }

  /* Slightly widen note sheets on mobile Arabic */
  html[lang="ar"] body .page .masonry,
  html[lang="ar"] body .page .paged-grid,
  html[lang="ar"] body .page .feature-grid{
    gap:12px !important;
    padding-inline:0 !important;
  }

  html[lang="ar"] body .page article.note,
  html[lang="ar"] body .page article.note.compact,
  html[lang="ar"] body .page article.note.mini-note,
  html[lang="ar"] body .page article.note.tall-note,
  html[lang="ar"] body .page article.note.wide-note,
  html[lang="ar"] body .page .masonry > article.note,
  html[lang="ar"] body .page .paged-grid > article.note,
  html[lang="ar"] body .page .feature-grid > article.note{
    width:100% !important;
    max-width:none !important;
    margin-inline:auto !important;
    padding-inline:16px !important;
  }
}


/* v2.3.9: Arabic mobile remove globe + widen note sheets */
@media (max-width:760px){
  /* Remove every remaining globe / language icon in Arabic mobile hero */
  html[lang="ar"] body .page .hero .mobile-language-picker,
  html[lang="ar"] body .page .hero .mobile-language-select{
    display:none !important;
  }

  html[lang="ar"] body .page .hero .mobile-language-picker::before,
  html[lang="ar"] body .page .hero .mobile-language-picker::after,
  html[lang="ar"] body .page .hero .language-menu::before,
  html[lang="ar"] body .page .hero .language-menu::after,
  html[lang="ar"] body .page .hero .mobile-collections-picker .top-icon-badge,
  html[lang="ar"] body .page .hero .language-menu .top-icon-badge,
  html[lang="ar"] body .page .hero .language-menu .language-current-flag,
  html[lang="ar"] body .page .hero .language-menu .language-flag{
    display:none !important;
    content:none !important;
  }

  html[lang="ar"] body .page .hero .language-menu summary{
    background-image:none !important;
    list-style:none !important;
  }

  html[lang="ar"] body .page .hero .language-menu summary::-webkit-details-marker{
    display:none !important;
  }

  /* Make key mobile Arabic blocks use the same widened width as the first link sheet */
  html[lang="ar"] body .page #highlights-section,
  html[lang="ar"] body .page #latest-section,
  html[lang="ar"] body .page #sensitive-section{
    width:calc(100% + 16px) !important;
    max-width:none !important;
    margin-inline:-8px !important;
  }

  html[lang="ar"] body .page #highlights-section .feature-grid,
  html[lang="ar"] body .page #latest-section .masonry,
  html[lang="ar"] body .page #latest-section .paged-grid,
  html[lang="ar"] body .page #sensitive-section .feature-grid,
  html[lang="ar"] body .page #sensitive-section .paged-grid{
    width:100% !important;
    max-width:none !important;
    padding-inline:0 !important;
    margin:0 !important;
    gap:12px !important;
  }

  /* Widen all sticky-note sheets in the three sections */
  html[lang="ar"] body .page #highlights-section article.note,
  html[lang="ar"] body .page #latest-section article.note,
  html[lang="ar"] body .page #sensitive-section article.note,
  html[lang="ar"] body .page #highlights-section .note,
  html[lang="ar"] body .page #latest-section .note,
  html[lang="ar"] body .page #sensitive-section .note,
  html[lang="ar"] body .page #highlights-section article.note.compact,
  html[lang="ar"] body .page #latest-section article.note.compact,
  html[lang="ar"] body .page #sensitive-section article.note.compact,
  html[lang="ar"] body .page #highlights-section article.note.mini-note,
  html[lang="ar"] body .page #latest-section article.note.mini-note,
  html[lang="ar"] body .page #sensitive-section article.note.mini-note,
  html[lang="ar"] body .page #highlights-section article.note.wide-note,
  html[lang="ar"] body .page #latest-section article.note.wide-note,
  html[lang="ar"] body .page #sensitive-section article.note.wide-note,
  html[lang="ar"] body .page #highlights-section article.note.tall-note,
  html[lang="ar"] body .page #latest-section article.note.tall-note,
  html[lang="ar"] body .page #sensitive-section article.note.tall-note,
  html[lang="ar"] body .page #highlights-section article.note.quote-note,
  html[lang="ar"] body .page #latest-section article.note.quote-note,
  html[lang="ar"] body .page #sensitive-section article.note.quote-note{
    width:calc(100% + 16px) !important;
    max-width:none !important;
    margin-inline:-8px !important;
    padding-inline:18px !important;
    box-sizing:border-box !important;
  }

  /* Widen section headers/pagers to visually match the widened sheets */
  html[lang="ar"] body .page #highlights-section .section-head,
  html[lang="ar"] body .page #latest-section .section-head,
  html[lang="ar"] body .page #sensitive-section .section-head,
  html[lang="ar"] body .page #highlights-section .section-pager,
  html[lang="ar"] body .page #latest-section .section-pager,
  html[lang="ar"] body .page #sensitive-section .section-pager,
  html[lang="ar"] body .page #latest-section .latest-filter-bar,
  html[lang="ar"] body .page #latest-section .latest-inline-links{
    width:calc(100% + 16px) !important;
    max-width:none !important;
    margin-inline:-8px !important;
    box-sizing:border-box !important;
  }
}


/* v2.4.0: Arabic mobile select-language text link + match widened sheets to top sheet */
@media (max-width:760px){
  /* single source of truth for the widened top-sheet width */
  html[lang="ar"] body .page{
    --ar-mobile-top-sheet-width: calc(100% + 16px);
    --ar-mobile-top-sheet-offset: -8px;
  }

  /* top hero action sheet remains the reference width */
  html[lang="ar"] body .page .hero > .hero-actions,
  html[lang="ar"] body .page .hero .hero-actions{
    width:var(--ar-mobile-top-sheet-width) !important;
    max-width:none !important;
    margin-inline:var(--ar-mobile-top-sheet-offset) !important;
  }

  /* replace removed globe spot with a visible text link */
  html[lang="ar"] body .page .hero .language-menu{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    align-self:stretch !important;
    margin:0 !important;
  }

  html[lang="ar"] body .page .hero .language-menu::before,
  html[lang="ar"] body .page .hero .language-menu::after,
  html[lang="ar"] body .page .hero .language-menu .language-current-flag,
  html[lang="ar"] body .page .hero .language-menu .top-icon-badge,
  html[lang="ar"] body .page .hero .language-menu .language-flag,
  html[lang="ar"] body .page .hero .mobile-language-picker,
  html[lang="ar"] body .page .hero .mobile-language-picker::before,
  html[lang="ar"] body .page .hero .mobile-language-picker::after,
  html[lang="ar"] body .page .hero .mobile-language-select{
    display:none !important;
    content:none !important;
  }

  html[lang="ar"] body .page .hero .language-menu summary,
  html[lang="ar"] body .page .hero .language-menu-label{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    width:100% !important;
    min-height:30px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    color:#5a4030 !important;
    font-family:"Noto Sans Arabic","Noto Sans","Inter",system-ui,sans-serif !important;
    font-size:21px !important;
    font-weight:900 !important;
    line-height:1.32 !important;
    text-align:right !important;
    direction:rtl !important;
    text-decoration:underline !important;
    text-decoration-thickness:2px !important;
    text-underline-offset:6px !important;
    text-decoration-color:rgba(183,116,102,.42) !important;
    white-space:normal !important;
    list-style:none !important;
  }

  html[lang="ar"] body .page .hero .language-menu summary::-webkit-details-marker{
    display:none !important;
  }

  html[lang="ar"] body .page .hero .language-menu-label::before,
  html[lang="ar"] body .page .hero .language-menu-label::after{
    content:none !important;
    display:none !important;
  }

  /* remove the extra widening from the whole board sections */
  html[lang="ar"] body .page #highlights-section,
  html[lang="ar"] body .page #latest-section,
  html[lang="ar"] body .page #sensitive-section,
  html[lang="ar"] body .page #highlights-section .section-head,
  html[lang="ar"] body .page #latest-section .section-head,
  html[lang="ar"] body .page #sensitive-section .section-head,
  html[lang="ar"] body .page #highlights-section .section-pager,
  html[lang="ar"] body .page #latest-section .section-pager,
  html[lang="ar"] body .page #sensitive-section .section-pager,
  html[lang="ar"] body .page #latest-section .latest-filter-bar,
  html[lang="ar"] body .page #latest-section .latest-inline-links{
    width:auto !important;
    max-width:none !important;
    margin-inline:0 !important;
  }

  /* only the expanded note sheets should match the top-sheet width exactly */
  html[lang="ar"] body .page #highlights-section article.note,
  html[lang="ar"] body .page #latest-section article.note,
  html[lang="ar"] body .page #sensitive-section article.note,
  html[lang="ar"] body .page #highlights-section .note,
  html[lang="ar"] body .page #latest-section .note,
  html[lang="ar"] body .page #sensitive-section .note,
  html[lang="ar"] body .page #highlights-section article.note.compact,
  html[lang="ar"] body .page #latest-section article.note.compact,
  html[lang="ar"] body .page #sensitive-section article.note.compact,
  html[lang="ar"] body .page #highlights-section article.note.mini-note,
  html[lang="ar"] body .page #latest-section article.note.mini-note,
  html[lang="ar"] body .page #sensitive-section article.note.mini-note,
  html[lang="ar"] body .page #highlights-section article.note.wide-note,
  html[lang="ar"] body .page #latest-section article.note.wide-note,
  html[lang="ar"] body .page #sensitive-section article.note.wide-note,
  html[lang="ar"] body .page #highlights-section article.note.tall-note,
  html[lang="ar"] body .page #latest-section article.note.tall-note,
  html[lang="ar"] body .page #sensitive-section article.note.tall-note,
  html[lang="ar"] body .page #highlights-section article.note.quote-note,
  html[lang="ar"] body .page #latest-section article.note.quote-note,
  html[lang="ar"] body .page #sensitive-section article.note.quote-note,
  html[lang="ar"] body .page #highlights-section .empty-state,
  html[lang="ar"] body .page #latest-section .empty-state,
  html[lang="ar"] body .page #sensitive-section .empty-state,
  html[lang="ar"] body .page #highlights-section .onboarding-note,
  html[lang="ar"] body .page #latest-section .onboarding-note,
  html[lang="ar"] body .page #sensitive-section .onboarding-note{
    width:var(--ar-mobile-top-sheet-width) !important;
    max-width:none !important;
    margin-inline:var(--ar-mobile-top-sheet-offset) !important;
    box-sizing:border-box !important;
  }

  /* keep the inner grids normal so width matching is controlled only by the cards */
  html[lang="ar"] body .page #highlights-section .feature-grid,
  html[lang="ar"] body .page #latest-section .masonry,
  html[lang="ar"] body .page #latest-section .paged-grid,
  html[lang="ar"] body .page #sensitive-section .feature-grid,
  html[lang="ar"] body .page #sensitive-section .paged-grid{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding-inline:0 !important;
  }
}


/* v2.4.1: Arabic mobile right-aligned links + language picker behaves like collections */
@media (max-width:760px){
  /* Keep all top-sheet links visually aligned to the right */
  html[lang="ar"] body .page .hero > .hero-actions,
  html[lang="ar"] body .page .hero .hero-actions{
    direction:rtl !important;
    text-align:right !important;
    align-items:stretch !important;
  }

  html[lang="ar"] body .page .hero #openComposeBtn,
  html[lang="ar"] body .page .hero .hero-link-btn,
  html[lang="ar"] body .page .hero .collections-menu summary,
  html[lang="ar"] body .page .hero .mobile-collections-picker,
  html[lang="ar"] body .page .hero .mobile-language-picker{
    width:100% !important;
    max-width:none !important;
    align-self:stretch !important;
    text-align:right !important;
    direction:rtl !important;
  }

  html[lang="ar"] body .page .hero #openComposeBtn,
  html[lang="ar"] body .page .hero .hero-link-btn,
  html[lang="ar"] body .page .hero .collections-menu summary{
    justify-content:flex-end !important;
    text-align:right !important;
  }

  /* Make Select language work like Collections on Arabic mobile */
  html[lang="ar"] body .page .hero .language-menu{
    display:none !important;
  }

  html[lang="ar"] body .page .hero .mobile-language-picker{
    position:relative !important;
    display:block !important;
    order:3 !important;
    margin:0 !important;
  }

  html[lang="ar"] body .page .hero .mobile-language-picker label,
  html[lang="ar"] body .page .hero .mobile-language-picker::after{
    display:none !important;
    content:none !important;
  }

  html[lang="ar"] body .page .hero .mobile-language-picker::before{
    content:attr(data-label) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    width:100% !important;
    min-height:30px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    color:#5a4030 !important;
    font-family:"Noto Sans Arabic","Noto Sans","Inter",system-ui,sans-serif !important;
    font-size:21px !important;
    font-weight:900 !important;
    line-height:1.32 !important;
    text-align:right !important;
    direction:rtl !important;
    text-decoration:underline !important;
    text-decoration-thickness:2px !important;
    text-underline-offset:6px !important;
    text-decoration-color:rgba(183,116,102,.42) !important;
    white-space:normal !important;
  }

  html[lang="ar"] body .page .hero .mobile-language-select{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    opacity:0 !important;
    display:block !important;
    cursor:pointer !important;
    z-index:2 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    -webkit-appearance:none !important;
    appearance:none !important;
  }

  /* Ensure collection trigger text is also visually right-aligned */
  html[lang="ar"] body .page .hero .mobile-collections-picker{
    position:relative !important;
    display:block !important;
  }

  html[lang="ar"] body .page .hero .mobile-collections-picker::before{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    text-align:right !important;
    direction:rtl !important;
    width:100% !important;
  }

  /* Right-align the remaining visible link text blocks */
  html[lang="ar"] body .page .hero .hero-actions > * + *{
    margin-top:4px !important;
  }
}





/* v2.4.5: Arabic mobile complete cleanup — single visible language row + true right alignment */
@media (max-width:760px){
  /* Use exactly one language control on Arabic mobile. */
  html[lang="ar"] body .page .hero .language-menu{
    display:none !important;
  }

  html[lang="ar"] body .page .hero .mobile-language-picker,
  html[lang="ar"] body .page .hero .mobile-collections-picker{
    position:relative !important;
    display:block !important;
    width:100% !important;
    max-width:none !important;
    align-self:stretch !important;
    margin:0 !important;
    direction:rtl !important;
    text-align:right !important;
  }

  /* Kill all old pseudo-labels/icons for these rows. */
  html[lang="ar"] body .page .hero .mobile-language-picker::before,
  html[lang="ar"] body .page .hero .mobile-language-picker::after,
  html[lang="ar"] body .page .hero .mobile-collections-picker::before,
  html[lang="ar"] body .page .hero .mobile-collections-picker::after,
  html[lang="ar"] body .page .hero .mobile-language-picker label,
  html[lang="ar"] body .page .hero .mobile-collections-picker label{
    content:none !important;
    display:none !important;
  }

  /* Visible labels in real DOM, not pseudo-elements. */
  html[lang="ar"] body .page .hero .mobile-inline-label{
    display:flex !important;
    width:100% !important;
    min-height:30px !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    color:#5a4030 !important;
    font-family:"Noto Sans Arabic","Noto Sans","Inter",system-ui,sans-serif !important;
    font-size:21px !important;
    font-weight:900 !important;
    line-height:1.32 !important;
    text-decoration:underline !important;
    text-decoration-thickness:2px !important;
    text-underline-offset:6px !important;
    text-decoration-color:rgba(183,116,102,.42) !important;
    white-space:normal !important;
  }

  html[lang="ar"] body .page .hero .mobile-language-visible-label{
    justify-content:flex-end !important;
    gap:10px !important;
    direction:ltr !important;
    text-align:right !important;
  }

  html[lang="ar"] body .page .hero .mobile-collections-visible-label{
    justify-content:flex-end !important;
    direction:rtl !important;
    text-align:right !important;
  }

  html[lang="ar"] body .page .hero .mobile-language-select,
  html[lang="ar"] body .page .hero .mobile-collections-select{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    display:block !important;
    opacity:0 !important;
    cursor:pointer !important;
    z-index:2 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    -webkit-appearance:none !important;
    appearance:none !important;
  }

  /* Right-align all visible hero actions on the top sticky sheet. */
  html[lang="ar"] body .page .hero > .hero-actions,
  html[lang="ar"] body .page .hero .hero-actions{
    direction:rtl !important;
    text-align:right !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
  }

  html[lang="ar"] body .page .hero #openComposeBtn,
  html[lang="ar"] body .page .hero #openChatBtn,
  html[lang="ar"] body .page .hero .hero-coffee-link,
  html[lang="ar"] body .page .hero .hero-link-btn{
    display:flex !important;
    width:100% !important;
    max-width:none !important;
    align-items:center !important;
    justify-content:flex-end !important;
    text-align:right !important;
    direction:rtl !important;
    margin:0 !important;
    padding-inline:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    color:#5a4030 !important;
    font-size:21px !important;
    font-weight:900 !important;
    line-height:1.32 !important;
    text-decoration:underline !important;
    text-decoration-thickness:2px !important;
    text-underline-offset:6px !important;
    text-decoration-color:rgba(183,116,102,.42) !important;
  }

  html[lang="ar"] body .page .hero #openChatBtn{
    flex-direction:row-reverse !important;
    gap:8px !important;
  }

  html[lang="ar"] body .page .hero #openChatBtn .chat-launch-icon{
    margin:0 !important;
    font-size:20px !important;
  }

  /* Ensure consistent ordering of visible rows. */
  html[lang="ar"] body .page .hero #openComposeBtn{order:1 !important;}
  html[lang="ar"] body .page .hero .mobile-collections-picker{order:2 !important;}
  html[lang="ar"] body .page .hero .mobile-language-picker{order:3 !important;}
  html[lang="ar"] body .page .hero #openChatBtn{order:4 !important;}
  html[lang="ar"] body .page .hero .hero-coffee-link{order:5 !important;}
  html[lang="ar"] body .page .hero .hero-link-btn[data-scroll-target="sensitive-section"]{order:6 !important;}

  html[lang="ar"] body .page .hero .hero-actions > * + *{
    margin-top:4px !important;
  }
}


/* v2.4.5: Arabic mobile force all top sticky-sheet links to the right */
@media (max-width:760px){
  html[lang="ar"] body .page .hero > .hero-actions,
  html[lang="ar"] body .page .hero .hero-actions{
    direction:rtl !important;
    text-align:right !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
  }

  html[lang="ar"] body .page .hero .hero-actions > *{
    width:100% !important;
    max-width:none !important;
    align-self:stretch !important;
    margin-inline:0 !important;
  }

  /* Real buttons/links */
  html[lang="ar"] body .page .hero #openComposeBtn,
  html[lang="ar"] body .page .hero #openChatBtn,
  html[lang="ar"] body .page .hero .hero-link-btn,
  html[lang="ar"] body .page .hero .hero-coffee-link{
    display:flex !important;
    width:100% !important;
    align-items:center !important;
    justify-content:flex-end !important;
    text-align:right !important;
    direction:rtl !important;
    margin-inline:0 !important;
    padding-inline:0 !important;
  }

  html[lang="ar"] body .page .hero #openChatBtn{
    flex-direction:row-reverse !important;
    gap:8px !important;
  }

  /* Native-select style rows */
  html[lang="ar"] body .page .hero .mobile-language-picker,
  html[lang="ar"] body .page .hero .mobile-collections-picker{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    text-align:right !important;
    direction:rtl !important;
    width:100% !important;
  }

  html[lang="ar"] body .page .hero .mobile-language-picker .mobile-inline-label,
  html[lang="ar"] body .page .hero .mobile-language-picker .mobile-language-visible-label,
  html[lang="ar"] body .page .hero .mobile-collections-picker .mobile-inline-label,
  html[lang="ar"] body .page .hero .mobile-collections-picker .mobile-collections-visible-label{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    width:100% !important;
    margin-inline-start:auto !important;
    margin-inline-end:0 !important;
    text-align:right !important;
    direction:rtl !important;
  }

  /* When the language visible label contains globe + text, keep them grouped on the right */
  html[lang="ar"] body .page .hero .mobile-language-picker .mobile-language-visible-label{
    gap:10px !important;
    flex-direction:row-reverse !important;
  }

  html[lang="ar"] body .page .hero .mobile-collections-picker .mobile-collections-visible-label{
    flex-direction:row !important;
  }
}


/* v2.4.6: hard override for Arabic mobile top-sheet right alignment */
@media (max-width:760px){
  html[lang="ar"] body .page div.hero-actions,
  html[lang="ar"] body .page .hero > div.hero-actions{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    text-align:right !important;
    direction:rtl !important;
  }

  html[lang="ar"] body .page div.hero-actions > button,
  html[lang="ar"] body .page div.hero-actions > details,
  html[lang="ar"] body .page div.hero-actions > div{
    width:100% !important;
    max-width:none !important;
    align-self:stretch !important;
    margin:0 !important;
  }

  html[lang="ar"] body .page div.hero-actions > button#openComposeBtn,
  html[lang="ar"] body .page div.hero-actions > button#openChatBtn,
  html[lang="ar"] body .page div.hero-actions > button#coffeeQuickLink,
  html[lang="ar"] body .page div.hero-actions > button.hero-link-btn{
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    text-align:right !important;
    direction:rtl !important;
    width:100% !important;
    margin:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  html[lang="ar"] body .page div.hero-actions > div.mobile-language-picker,
  html[lang="ar"] body .page div.hero-actions > div.mobile-collections-picker{
    display:block !important;
    position:relative !important;
    width:100% !important;
    text-align:right !important;
    direction:rtl !important;
  }

  html[lang="ar"] body .page div.hero-actions > div.mobile-language-picker .mobile-language-visible-label,
  html[lang="ar"] body .page div.hero-actions > div.mobile-language-picker .mobile-inline-label,
  html[lang="ar"] body .page div.hero-actions > div.mobile-collections-picker .mobile-collections-visible-label,
  html[lang="ar"] body .page div.hero-actions > div.mobile-collections-picker .mobile-inline-label{
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    width:100% !important;
    text-align:right !important;
    direction:rtl !important;
    margin:0 !important;
    padding:0 !important;
  }

  html[lang="ar"] body .page div.hero-actions > div.mobile-language-picker .mobile-language-visible-label{
    flex-direction:row-reverse !important;
    gap:10px !important;
  }

  html[lang="ar"] body .page div.hero-actions > div.mobile-collections-picker .mobile-collections-visible-label{
    flex-direction:row !important;
  }

  html[lang="ar"] body .page div.hero-actions > details.language-menu,
  html[lang="ar"] body .page div.hero-actions > details.collections-menu{
    text-align:right !important;
    direction:rtl !important;
  }

  /* Keep only one visible language control on Arabic mobile */
  html[lang="ar"] body .page div.hero-actions > details.language-menu{
    display:none !important;
  }

  html[lang="ar"] body .page div.hero-actions > div.mobile-language-picker{
    display:block !important;
  }

  /* Remove extra pseudo globe remnants */
  html[lang="ar"] body .page div.hero-actions > div.mobile-language-picker::before,
  html[lang="ar"] body .page div.hero-actions > div.mobile-language-picker::after,
  html[lang="ar"] body .page div.hero-actions > div.mobile-collections-picker::before,
  html[lang="ar"] body .page div.hero-actions > div.mobile-collections-picker::after{
    content:none !important;
  }
}


/* v2.4.7: Arabic mobile proxy rows support */
@media (max-width:760px){
  html[lang="ar"] .hero-actions .ar-mobile-topsheet-proxy{
    width:100% !important;
  }
}


/* v2.4.8: Arabic mobile — fix RTL flex bugs beyond the hero top-sheet */
@media (max-width:760px){
  /* Note action row (Read full note / Reply buttons): hug the right edge naturally in RTL.
     Previous patches forced direction:ltr + flex-direction:row-reverse + justify:flex-start,
     which leaves a wide empty gap on the left. Use native RTL flex instead: flex-start in
     an RTL flex container puts the first child on the right. */
  html[lang="ar"] body .page article.note .action-row{
    direction:rtl !important;
    flex-direction:row !important;
    justify-content:flex-start !important;
  }

  html[lang="ar"] body .page article.note .reply-btn,
  html[lang="ar"] body .page article.note .read-btn,
  html[lang="ar"] body .page article.note .tiny-btn{
    direction:rtl !important;
  }

  /* Note per-post management buttons (×, 📎) — mirror to the right of the note in RTL. */
  html[lang="ar"] body .page article.note .post-text-actions{
    direction:rtl !important;
    justify-content:flex-start !important;
  }
}

/* v2.4.8: Arabic — character counter should display "0 / 420" in LTR order,
   even when the surrounding helper row is RTL. */
html[lang="ar"] .char-counter,
html[dir="rtl"] .char-counter{
  direction:ltr !important;
  unicode-bidi:isolate !important;
  text-align:left !important;
}


/* v2.4.9: Arabic mobile — right-align section headings, pagers, and filter bars
   for Board highlights / Latest notes / Unanswered notes.
   A previous patch forced direction:ltr + text-align:left on .section-head, .section-pager,
   and their headings to keep a specific visual composition. In Arabic mobile that produces
   an unwanted left-hugged layout. Restore natural RTL alignment. */
@media (max-width:760px){
  /* Section heads: Board highlights / Latest notes / Unanswered notes */
  html[lang="ar"] body .page .section-head,
  html[lang="ar"] body .page .latest-section-head,
  html[lang="ar"] body .page .latest-head-row,
  html[lang="ar"] body #highlights-section .section-head,
  html[lang="ar"] body #latest-section .section-head,
  html[lang="ar"] body #latest-section .latest-section-head,
  html[lang="ar"] body #sensitive-section .section-head{
    direction:rtl !important;
    text-align:right !important;
    align-items:flex-end !important;
  }

  /* Section heading text */
  html[lang="ar"] body .page .section-head h2,
  html[lang="ar"] body .page .section-head h3,
  html[lang="ar"] body .page .section-head h4,
  html[lang="ar"] body .page .latest-head-row h2,
  html[lang="ar"] body .page .latest-head-row h3,
  html[lang="ar"] body .page .latest-head-row h4,
  html[lang="ar"] body #highlights-section .section-head h2,
  html[lang="ar"] body #highlights-section .section-head h3,
  html[lang="ar"] body #highlights-section .section-head h4,
  html[lang="ar"] body #latest-section .section-head h2,
  html[lang="ar"] body #latest-section .section-head h3,
  html[lang="ar"] body #latest-section .section-head h4,
  html[lang="ar"] body #sensitive-section .section-head h2,
  html[lang="ar"] body #sensitive-section .section-head h3,
  html[lang="ar"] body #sensitive-section .section-head h4{
    direction:rtl !important;
    text-align:right !important;
    align-self:flex-end !important;
    margin-inline-start:auto !important;
    margin-inline-end:0 !important;
  }

  /* Pager (Previous | 1/1 | Next): align to the right and keep arrows mirrored */
  html[lang="ar"] body .page .section-pager,
  html[lang="ar"] body #highlights-section .section-pager,
  html[lang="ar"] body #latest-section .section-pager,
  html[lang="ar"] body #sensitive-section .section-pager{
    direction:rtl !important;
    flex-direction:row !important;
    justify-content:flex-start !important;  /* RTL flex: flex-start = right edge */
    align-self:flex-end !important;
    margin-inline-start:auto !important;
    margin-inline-end:0 !important;
  }

  /* Latest filter bar ("Viewing: All" + "View all" chip) */
  html[lang="ar"] body .page #latest-section .latest-filter-bar,
  html[lang="ar"] body .page .latest-filter-bar,
  html[lang="ar"] body #latest-section .latest-filter-bar,
  html[lang="ar"] body .latest-filter-bar{
    direction:rtl !important;
    flex-direction:row !important;
    justify-content:flex-start !important;  /* RTL flex: flex-start = right edge */
    text-align:right !important;
    align-items:center !important;
  }

  html[lang="ar"] body .latest-filter-bar .latest-filter-chip,
  html[lang="ar"] body .latest-filter-bar .latest-filter-clear{
    direction:rtl !important;
    text-align:right !important;
  }
}

/* CSS_VERSION_STAMP: v2.4.9-2026-04-23
   If a browser has this file, the previous comment line will exist.
   You can verify by running in DevTools console:
     getComputedStyle(document.querySelector('#latest-section .section-head'))
       .direction === 'rtl'
   If it returns true, the fix is loaded and the mobile breakpoint is active. */





/* v2.5.1: Arabic mobile — fix the specific board header RTL issues seen in screenshots.
   Scope intentionally limited to the three affected board section headers on phone sizes:
   - heading text hugs the right edge
   - decorative underline starts from the right, not the left
   - latest shortcuts align from the right in RTL
   - pager keeps an RTL visual flow under the heading
*/
@media (max-width:760px){
  html[lang="ar"] body .page #highlights-section .section-head,
  html[lang="ar"] body .page #latest-section .section-head,
  html[lang="ar"] body .page #latest-section .latest-head-row,
  html[lang="ar"] body .page #sensitive-section .section-head{
    direction:rtl !important;
    text-align:right !important;
    align-items:flex-end !important;
  }

  html[lang="ar"] body .page #highlights-section .section-head h2,
  html[lang="ar"] body .page #highlights-section .section-head h4,
  html[lang="ar"] body .page #latest-section .section-head h2,
  html[lang="ar"] body .page #latest-section .section-head h4,
  html[lang="ar"] body .page #latest-section .latest-head-row h2,
  html[lang="ar"] body .page #latest-section .latest-head-row h4,
  html[lang="ar"] body .page #sensitive-section .section-head h2,
  html[lang="ar"] body .page #sensitive-section .section-head h4{
    direction:rtl !important;
    text-align:right !important;
    align-self:flex-end !important;
    margin-inline-start:auto !important;
    margin-inline-end:0 !important;
  }

  html[lang="ar"] body .page #highlights-section .section-head h2::after,
  html[lang="ar"] body .page #highlights-section .section-head h4::after,
  html[lang="ar"] body .page #latest-section .section-head h2::after,
  html[lang="ar"] body .page #latest-section .section-head h4::after,
  html[lang="ar"] body .page #latest-section .latest-head-row h2::after,
  html[lang="ar"] body .page #latest-section .latest-head-row h4::after,
  html[lang="ar"] body .page #sensitive-section .section-head h2::after,
  html[lang="ar"] body .page #sensitive-section .section-head h4::after{
    left:auto !important;
    right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    width:min(260px,100%) !important;
  }

  html[lang="ar"] body .page #latest-section .latest-head-row{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    gap:8px !important;
  }

  html[lang="ar"] body .page #latest-section .latest-inline-links{
    width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    align-self:flex-end !important;
    direction:rtl !important;
    text-align:right !important;
    gap:8px !important;
  }

  html[lang="ar"] body .page #latest-section .latest-inline-links .hero-link-btn{
    direction:rtl !important;
    text-align:center !important;
    white-space:normal !important;
  }

  html[lang="ar"] body .page #highlights-section .section-pager,
  html[lang="ar"] body .page #latest-section .section-pager,
  html[lang="ar"] body .page #sensitive-section .section-pager{
    direction:rtl !important;
    display:grid !important;
    grid-template-columns:1fr auto 1fr !important;
    align-items:center !important;
    gap:8px !important;
    width:100% !important;
    justify-content:initial !important;
    align-self:flex-end !important;
    margin-inline-start:auto !important;
    margin-inline-end:0 !important;
  }

  html[lang="ar"] body .page #highlights-section .section-pager .pager-btn,
  html[lang="ar"] body .page #latest-section .section-pager .pager-btn,
  html[lang="ar"] body .page #sensitive-section .section-pager .pager-btn{
    min-height:40px !important;
    text-align:center !important;
  }

  html[lang="ar"] body .page #highlights-section .section-pager .pager-info,
  html[lang="ar"] body .page #latest-section .section-pager .pager-info,
  html[lang="ar"] body .page #sensitive-section .section-pager .pager-info{
    text-align:center !important;
    min-width:58px !important;
  }
}


/* v2.4.10: hide the two latest-filter chips on Arabic mobile */
@media (max-width: 768px){
  html[lang="ar"] body #latest-section .latest-filter-bar,
  html[lang="ar"] body .latest-filter-bar{
    display:none !important;
  }
}


/* v2.5.2: removed Arabic mobile debug border code from source */


/* v2.5.3: Arabic mobile — move the pager inline after the section title
   for Latest notes and Unanswered notes. */
@media (max-width:760px){
  html[lang="ar"] body .page #latest-section .section-head.latest-section-head{
    display:grid !important;
    grid-template-columns:auto auto !important;
    grid-template-areas:
      "pager heading"
      "links links" !important;
    justify-content:end !important;
    align-items:center !important;
    column-gap:10px !important;
    row-gap:8px !important;
  }

  html[lang="ar"] body .page #latest-section .latest-head-row{
    display:contents !important;
  }

  html[lang="ar"] body .page #latest-section .latest-head-row h4{
    grid-area:heading !important;
    margin:0 !important;
    align-self:center !important;
  }

  html[lang="ar"] body .page #latest-section .latest-inline-links{
    grid-area:links !important;
    width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:8px !important;
  }

  html[lang="ar"] body .page #latest-section .section-pager,
  html[lang="ar"] body .page #sensitive-section .section-pager{
    width:auto !important;
    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    margin:0 !important;
    align-self:center !important;
    vertical-align:middle !important;
  }

  html[lang="ar"] body .page #latest-section .section-pager{
    grid-area:pager !important;
  }

  html[lang="ar"] body .page #latest-section .section-pager .pager-btn,
  html[lang="ar"] body .page #sensitive-section .section-pager .pager-btn{
    min-height:38px !important;
    padding-inline:14px !important;
    white-space:nowrap !important;
  }

  html[lang="ar"] body .page #latest-section .section-pager .pager-info,
  html[lang="ar"] body .page #sensitive-section .section-pager .pager-info{
    min-width:auto !important;
    white-space:nowrap !important;
  }

  html[lang="ar"] body .page #sensitive-section .section-head{
    display:grid !important;
    grid-template-columns:auto auto !important;
    grid-template-areas:"pager heading" !important;
    justify-content:end !important;
    align-items:center !important;
    column-gap:10px !important;
    row-gap:8px !important;
  }

  html[lang="ar"] body .page #sensitive-section .section-head h4{
    grid-area:heading !important;
    margin:0 !important;
    align-self:center !important;
  }

  html[lang="ar"] body .page #sensitive-section .section-pager{
    grid-area:pager !important;
  }
}


/* v2.5.4: Arabic mobile — reduce section title size for Latest notes and Unanswered notes */
@media (max-width:760px){
  html[lang="ar"] body .page #latest-section .latest-head-row h4,
  html[lang="ar"] body .page #sensitive-section .section-head h4{
    font-size:clamp(18px, 5.4vw, 24px) !important;
    line-height:1.2 !important;
  }
}

/* v2.5.5: Arabic mobile — replace pager text labels with triangle symbols */
@media (max-width:760px){
  html[lang="ar"] body .page .section-pager .pager-btn{
    position:relative !important;
    font-size:0 !important;
    line-height:1 !important;
    color:transparent !important;
    text-indent:0 !important;
    min-width:56px !important;
    padding-inline:12px !important;
  }

  html[lang="ar"] body .page .section-pager .pager-btn::before{
    display:inline-block !important;
    font-size:24px !important;
    line-height:1 !important;
    color:var(--chalk) !important;
    font-weight:900 !important;
    vertical-align:middle !important;
  }

  html[lang="ar"] body .page .section-pager .pager-btn[data-action="prev"]::before{
    content:"▶" !important;
  }

  html[lang="ar"] body .page .section-pager .pager-btn[data-action="next"]::before{
    content:"◀" !important;
  }
}

/* v2.5.6: Arabic page — hide Latest notes and Unanswered notes section titles */
html[lang="ar"] body .page #latest-section .latest-head-row h4,
html[lang="ar"] body .page #sensitive-section .section-head h4{
  display:none !important;
}

/* v2.5.7: Arabic page — hide Board highlights section title */
html[lang="ar"] body .page #highlights-section .section-head h2,
html[lang="ar"] body .page #highlights-section .section-head h4{
  display:none !important;
}

/* v2.5.7b: Arabic desktop — restore Board highlights / Latest notes / Unanswered notes titles without touching mobile */
@media (min-width:761px){
  html[lang="ar"] body .page #highlights-section .section-head h2,
  html[lang="ar"] body .page #highlights-section .section-head h4,
  html[lang="ar"] body .page #latest-section .latest-head-row h4,
  html[lang="ar"] body .page #sensitive-section .section-head h4{
    display:block !important;
    visibility:visible !important;
  }
}

/* v2.5.8: Arabic page — hide View answered notes link */
html[lang="ar"] body .page .latest-inline-links [data-i18n="view_answered_notes"]{
  display:none !important;
}

/* v2.5.9: Arabic mobile — make all containers transparent */
@media (max-width:760px){
  html[lang="ar"] body .page .hero,
  html[lang="ar"] body .page .heading,
  html[lang="ar"] body .page .heading h1,
  html[lang="ar"] body .page .hero-kicker,
  html[lang="ar"] body .page .hero-support-strip,
  html[lang="ar"] body .page .support-pill,
  html[lang="ar"] body .page .brand-sub,
  html[lang="ar"] body .page .content > section,
  html[lang="ar"] body .page #highlights-section,
  html[lang="ar"] body .page #latest-section,
  html[lang="ar"] body .page #sensitive-section,
  html[lang="ar"] body .page .section-head,
  html[lang="ar"] body .page .latest-head-row,
  html[lang="ar"] body .page .latest-inline-links,
  html[lang="ar"] body .page .latest-filter-bar,
  html[lang="ar"] body .page .board-footer,
  html[lang="ar"] body .page .visit-count{
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
  }
}

/* v2.6.0: Arabic mobile — make all container borders fully transparent/invisible */
@media (max-width:760px){
  html[lang="ar"] body .page .hero,
  html[lang="ar"] body .page .heading,
  html[lang="ar"] body .page .heading h1,
  html[lang="ar"] body .page .hero-kicker,
  html[lang="ar"] body .page .hero-support-strip,
  html[lang="ar"] body .page .support-pill,
  html[lang="ar"] body .page .brand-sub,
  html[lang="ar"] body .page .content > section,
  html[lang="ar"] body .page #highlights-section,
  html[lang="ar"] body .page #latest-section,
  html[lang="ar"] body .page #sensitive-section,
  html[lang="ar"] body .page .section-head,
  html[lang="ar"] body .page .latest-head-row,
  html[lang="ar"] body .page .latest-inline-links,
  html[lang="ar"] body .page .latest-filter-bar,
  html[lang="ar"] body .page .board-footer,
  html[lang="ar"] body .page .visit-count{
    border-color:transparent !important;
    border:none !important;
    outline:0 !important;
    box-shadow:none !important;
  }
}

/* v2.6.1: Arabic mobile — add clear horizontal separators between all sections */
@media (max-width:760px){
  html[lang="ar"] body .page .content > section{
    position:relative !important;
  }

  html[lang="ar"] body .page .content > section + section{
    border-top:3px solid rgba(255,255,255,.55) !important;
    margin-top:22px !important;
    padding-top:22px !important;
  }

  /* Also separate the board footer clearly from the last section */
  html[lang="ar"] body .page .board-footer{
    border-top:3px solid rgba(255,255,255,.55) !important;
    margin-top:22px !important;
    padding-top:22px !important;
  }
}

/* v2.6.4: Arabic mobile — make section dividers longer, thinner, and gray */
@media (max-width:760px){
  html[lang="ar"] body .page .content > section,
  html[lang="ar"] body .page .board-footer{
    position:relative !important;
    border-top:none !important;
    padding-top:20px !important;
    margin-top:20px !important;
  }

  html[lang="ar"] body .page .content > section::before,
  html[lang="ar"] body .page .board-footer::before{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    left:12px !important;
    right:12px !important;
    width:auto !important;
    height:1px !important;
    background:#b9c0c8 !important;
    border-radius:999px !important;
    opacity:.95 !important;
    display:block !important;
    box-shadow:none !important;
    pointer-events:none !important;
  }
}

/* v2.5.7c: Arabic desktop — keep visitor counter centered without affecting mobile */
@media (min-width:761px){
  html[lang="ar"] .board-footer > .visit-count{
    width:fit-content !important;
    max-width:100% !important;
    margin:0 auto 8px !important;
    align-self:center !important;
    justify-content:center !important;
    text-align:center !important;
  }
}

/* v18.1: Arabic desktop chat popup vertical divider between people panel and room */
@media (min-width:761px){
  html[lang="ar"] #chatModal .chat-sidebar,
  html[lang="ar"] #chatModal .chat-sidebar.chat-sidebar-minimal{
    border-right:none !important;
    border-left:1px solid rgba(255,248,220,.24) !important;
    padding-right:0 !important;
    padding-left:28px !important;
  }
  html[lang="ar"] #chatModal .chat-main{
    padding:10px 24px 0 0 !important;
  }
}

/* v20: Arabic desktop chat popup — keep message meta and text anchored to the right */
@media (min-width:761px){
  html[lang="ar"] #chatModal .chat-message-list{
    direction:rtl !important;
    align-items:stretch !important;
  }

  html[lang="ar"] #chatModal .chat-bubble,
  html[lang="ar"] #chatModal .chat-bubble.is-self{
    align-self:stretch !important;
    max-width:none !important;
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    text-align:right !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-head,
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-head{
    display:inline-flex !important;
    width:auto !important;
    max-width:100% !important;
    align-self:flex-end !important;
    flex-direction:row-reverse !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:8px !important;
    direction:rtl !important;
    text-align:right !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-avatar{
    flex:0 0 auto !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-head .chat-name-btn,
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-head .chat-name-btn{
    direction:auto !important;
    unicode-bidi:plaintext !important;
    text-align:right !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-time,
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-time{
    margin:0 !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
    text-align:right !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-text,
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-text{
    width:auto !important;
    max-width:100% !important;
    align-self:flex-end !important;
    direction:auto !important;
    unicode-bidi:plaintext !important;
    text-align:right !important;
  }
}

/* v20.1: Arabic desktop chat popup — keep popup Arabic and anchor message meta/text to the right */
@media (min-width:761px){
  html[lang="ar"] #chatModal .chat-message-list{
    direction:rtl !important;
    align-items:stretch !important;
  }
  html[lang="ar"] #chatModal .chat-bubble,
  html[lang="ar"] #chatModal .chat-bubble.is-self{
    width:100% !important;
    max-width:none !important;
    align-self:stretch !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    text-align:right !important;
  }
  html[lang="ar"] #chatModal .chat-bubble-head,
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-head{
    display:inline-flex !important;
    width:auto !important;
    max-width:100% !important;
    margin:0 0 6px auto !important;
    align-self:flex-end !important;
    flex-direction:row-reverse !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:8px !important;
    direction:rtl !important;
    text-align:right !important;
  }
  html[lang="ar"] #chatModal .chat-bubble-head .chat-name-btn,
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-head .chat-name-btn{
    direction:auto !important;
    unicode-bidi:plaintext !important;
    text-align:right !important;
    margin:0 !important;
  }
  html[lang="ar"] #chatModal .chat-bubble-time,
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-time{
    margin:0 !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
    text-align:right !important;
    white-space:nowrap !important;
  }
  html[lang="ar"] #chatModal .chat-bubble-text,
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-text{
    width:auto !important;
    max-width:100% !important;
    margin:0 0 0 auto !important;
    align-self:flex-end !important;
    direction:auto !important;
    unicode-bidi:plaintext !important;
    text-align:right !important;
  }
  html[lang="ar"] #chatModal .chat-message-input,
  html[lang="ar"] #chatModal .chat-message-input::placeholder{
    direction:rtl !important;
    text-align:right !important;
    unicode-bidi:plaintext !important;
  }
  html[lang="ar"] #chatModal .chat-composer-helper-row{
    direction:rtl !important;
    text-align:right !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:14px !important;
  }
  html[lang="ar"] #chatModal .chat-composer-helper-row .composer-helper{
    direction:rtl !important;
    text-align:right !important;
    unicode-bidi:plaintext !important;
  }
  html[lang="ar"] #chatModal .chat-kbd-inline{
    display:inline-block !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
    white-space:nowrap !important;
    font-weight:900 !important;
  }
}

/* v20.1: Arabic page — keep visitor counter visible and centered after footer text updates */
@media (min-width:761px){
  html[lang="ar"] .board-footer .visit-count{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    width:fit-content !important;
    max-width:100% !important;
    margin:0 auto 8px !important;
    justify-content:center !important;
    align-items:center !important;
  }
}

/* v20.2: Arabic desktop — center the visitor counter line across the full footer width */
@media (min-width:761px){
  html[lang="ar"] .board-footer{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  html[lang="ar"] .board-footer .visit-count{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 auto 10px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    text-align:center !important;
    direction:rtl !important;
    unicode-bidi:plaintext !important;
  }

  html[lang="ar"] .board-footer .visit-count strong{
    display:inline !important;
  }

  html[lang="ar"] .board-footer .footer-meta,
  html[lang="ar"] .board-footer > div,
  html[lang="ar"] .board-footer > span{
    width:100% !important;
    text-align:center !important;
    margin-inline:auto !important;
  }
}

/* v20.3: Arabic desktop — center footer meta text and footer links */
@media (min-width:761px){
  html[lang="ar"] .board-footer .footer-meta{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    text-align:center !important;
    margin:0 auto !important;
  }

  html[lang="ar"] .board-footer .footer-meta > span,
  html[lang="ar"] .board-footer .footer-meta > div,
  html[lang="ar"] .board-footer .footer-meta > nav{
    width:100% !important;
    text-align:center !important;
    margin-inline:auto !important;
  }

  html[lang="ar"] .board-footer .footer-links{
    display:flex !important;
    width:100% !important;
    justify-content:center !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:14px !important;
    margin:0 auto !important;
  }
}

/* v20.4: Desktop all languages — center visitor count, footer meta, and footer links */
@media (min-width:761px){
  .board-footer{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  .board-footer .visit-count{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 auto 10px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    text-align:center !important;
  }

  .board-footer .footer-meta{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    text-align:center !important;
    margin:0 auto !important;
  }

  .board-footer .footer-meta > span,
  .board-footer .footer-meta > div,
  .board-footer .footer-meta > nav{
    width:100% !important;
    text-align:center !important;
    margin-inline:auto !important;
  }

  .board-footer .footer-links{
    display:flex !important;
    width:100% !important;
    justify-content:center !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:14px !important;
    margin:0 auto !important;
  }
}

/* v20.3: Desktop all languages — remove "View unanswered notes" shortcut links without affecting mobile */
@media (min-width:761px){
  .hero-actions > .hero-link-btn[data-i18n="view_unanswered_notes"],
  .latest-inline-link[data-i18n="view_unanswered_notes"]{
    display:none !important;
  }
}

/* v73: desktop all languages — remove colored bars/backgrounds from chat messages */
@media (min-width:761px){
  #chatModal .chat-message-list{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
  }
  #chatModal .chat-message-list::before{
    content:none !important;
    display:none !important;
  }
  #chatModal .chat-bubble,
  #chatModal .chat-bubble.is-self,
  #chatModal .chat-bubble:nth-child(5n+1),
  #chatModal .chat-bubble:nth-child(5n+2),
  #chatModal .chat-bubble:nth-child(5n+3),
  #chatModal .chat-bubble:nth-child(5n+4),
  #chatModal .chat-bubble:nth-child(5n+5){
    display:block !important;
    width:auto !important;
    max-width:100% !important;
    padding:0 !important;
    margin:0 !important;
    background:none !important;
    background-color:transparent !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    transform:none !important;
  }
  #chatModal .chat-bubble::before,
  #chatModal .chat-bubble::after,
  #chatModal .chat-bubble.is-self::before,
  #chatModal .chat-bubble.is-self::after{
    content:none !important;
    display:none !important;
  }
}

/* v76: Arabic page — show the View answered notes shortcut next to Latest notes */
html[lang="ar"] body .page .latest-inline-links [data-i18n="view_answered_notes"]{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* v94: mobile-only safety and usability patch — intentionally scoped to phones only, desktop untouched */
@media (max-width:760px){
  /* Remove any leftover mobile debug frames without changing desktop */
  html body,
  html body .page,
  html body .board-wrap,
  html body .content,
  html body .hero,
  html body .heading,
  html body .header-illustration,
  html body .brand-logo,
  html body .brand-mark,
  html body .hero-actions,
  html body .section,
  html body .section-head,
  html body .latest-section-head,
  html body .latest-head-row,
  html body .section-pager,
  html body .latest-filter-bar,
  html body .feature-grid,
  html body .masonry,
  html body .paged-grid,
  html body .note,
  html body .empty-state,
  html body .onboarding-note,
  html body .board-footer,
  html body .visit-count,
  html body .floating-top,
  html body .toolbar,
  html body .modal-card,
  html body .chat-card{
    outline:none !important;
  }

  /* Prevent accidental side-scroll on narrow phones */
  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    -webkit-text-size-adjust:100% !important;
  }

  *,
  *::before,
  *::after{
    box-sizing:border-box !important;
  }

  .page,
  .hero,
  .board-wrap,
  .content,
  .content > section,
  #highlights-section,
  #latest-section,
  #sensitive-section,
  .feature-grid,
  .masonry,
  .paged-grid,
  .note,
  .empty-state,
  .onboarding-note{
    max-width:100% !important;
  }

  img,
  svg,
  video,
  canvas{
    max-width:100% !important;
    height:auto !important;
  }

  /* Keep iOS from zooming form fields and make taps easier */
  button,
  input,
  select,
  textarea,
  .btn,
  .hero-link-btn,
  .dropdown-item,
  .pager-btn,
  .reply-btn,
  .tiny-btn,
  .icon-close,
  .sticker-btn{
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:rgba(255,255,255,.18) !important;
  }

  input,
  select,
  textarea,
  .composer-input,
  .composer-select,
  .support-textarea,
  .mobile-language-select,
  .mobile-collections-select,
  .chat-message-input{
    font-size:16px !important;
  }

  #openComposeBtn,
  #openChatBtn,
  .hero-coffee-link,
  .hero-actions .mobile-language-picker,
  .hero-actions .mobile-collections-picker,
  .hero-actions .mobile-language-picker::before,
  .hero-actions .mobile-collections-picker::before{
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
  }

  .hero-actions .mobile-language-select,
  .hero-actions .mobile-collections-select{
    min-height:44px !important;
  }

  .top-dropdown-list,
  .language-dropdown-list{
    max-width:calc(100vw - 32px) !important;
    max-height:min(70dvh, 480px) !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .note .title,
  .note .body,
  .opened-note-title,
  .opened-note-text,
  .read-modal-copy,
  .chat-bubble-text,
  .chat-name-btn,
  .section-head h2,
  .section-head h4,
  .latest-head-row h4{
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }

  .action-row,
  .note-actions,
  .modal-actions,
  .chat-modal-actions,
  .reply-actions{
    flex-wrap:wrap !important;
  }

  /* Phone modals: keep header/actions reachable and body scrollable */
  .modal-backdrop:not([hidden]){
    position:fixed !important;
    inset:0 !important;
    width:100% !important;
    height:100dvh !important;
    max-height:100dvh !important;
    padding:0 !important;
    overflow:hidden !important;
    align-items:flex-end !important;
  }

  .modal-card{
    width:100% !important;
    max-width:100% !important;
    max-height:100dvh !important;
    margin:0 !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
  }

  .modal-head{
    flex:0 0 auto !important;
  }

  .modal-body{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .modal-actions{
    flex:0 0 auto !important;
    padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #composeModal .composer-textarea,
  #composeModal .support-textarea{
    min-height:150px !important;
    max-height:min(34dvh, 240px) !important;
  }

  /* Chat modal: preserve message space and keep composer usable above phone safe area */
  #chatModal .chat-card{
    height:100dvh !important;
    max-height:100dvh !important;
  }

  #chatModal .chat-modal-body,
  #chatModal .chat-shell,
  #chatModal .chat-main{
    min-height:0 !important;
  }

  #chatModal .chat-message-list{
    min-height:0 !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
  }

  #chatModal .chat-composer{
    padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #chatModal .chat-message-input{
    max-height:min(30dvh, 180px) !important;
  }
}

@supports not (height:100dvh){
  @media (max-width:760px){
    .modal-backdrop:not([hidden]),
    .modal-card,
    #chatModal .chat-card{
      height:100vh !important;
      max-height:100vh !important;
    }
  }
}

/* v2.5.5: non-Arabic mobile top-sheet label cleanup.
   Uses real translated DOM labels instead of English-only pseudo labels.
   Scoped to phone widths and excludes Arabic so existing Arabic RTL fixes stay unchanged. */
@media (max-width:760px){
  html:not([lang="ar"]) body .page .hero .mobile-language-picker::before,
  html:not([lang="ar"]) body .page .hero .mobile-language-picker::after,
  html:not([lang="ar"]) body .page .hero .mobile-collections-picker::before,
  html:not([lang="ar"]) body .page .hero .mobile-collections-picker::after{
    content:none !important;
    display:none !important;
  }

  html:not([lang="ar"]) body .page .hero .mobile-language-picker,
  html:not([lang="ar"]) body .page .hero .mobile-collections-picker{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    max-width:none !important;
    min-height:44px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    text-align:left !important;
    direction:ltr !important;
  }

  html:not([lang="ar"]) body .page .hero .mobile-language-visible-label,
  html:not([lang="ar"]) body .page .hero .mobile-collections-visible-label{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-height:44px !important;
    margin:0 !important;
    padding:0 !important;
    color:#5d4332 !important;
    font-family:"Noto Sans Thai","Noto Sans Devanagari","Noto Sans CJK KR","Noto Sans CJK JP","Noto Sans CJK SC","Noto Sans","Inter",system-ui,sans-serif !important;
    font-size:18px !important;
    font-weight:900 !important;
    line-height:1.32 !important;
    letter-spacing:-0.01em !important;
    text-align:left !important;
    text-decoration:underline !important;
    text-decoration-thickness:2px !important;
    text-underline-offset:4px !important;
    text-decoration-color:rgba(183,116,102,.42) !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    pointer-events:none !important;
  }

  html:not([lang="ar"]) body .page .hero .mobile-language-select,
  html:not([lang="ar"]) body .page .hero .mobile-collections-select{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:44px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
    opacity:0 !important;
    cursor:pointer !important;
    z-index:2 !important;
    -webkit-appearance:none !important;
    appearance:none !important;
  }
}

/* v2.5.8: mobile footer centering for all languages, including Arabic. Desktop untouched. */
@media (max-width:760px){
  html body .page .board-footer{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  html body .page .board-footer .visit-count{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    width:max-content !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  html body .page .board-footer .footer-meta{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  html body .page .board-footer .footer-meta > span{
    display:block !important;
    width:100% !important;
    max-width:min(92vw, 560px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
    text-wrap:balance;
  }

  html body .page .board-footer .footer-links{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  html body .page .board-footer .footer-links a{
    text-align:center !important;
  }

  html[lang="ar"] body .page .board-footer,
  html[lang="ar"] body .page .board-footer .footer-meta,
  html[lang="ar"] body .page .board-footer .footer-meta > span,
  html[lang="ar"] body .page .board-footer .footer-links{
    direction:rtl !important;
    text-align:center !important;
  }

  html[lang="ar"] body .page .board-footer .visit-count{
    direction:rtl !important;
    text-align:center !important;
    unicode-bidi:plaintext !important;
  }
}

/* v2.5.9: hide back-to-top floating button on mobile only. Desktop untouched. */
@media (max-width:760px){
  html body .floating-top,
  html body .floating-top.is-visible,
  html body #backToTopBtn{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
}

/* v2.6.0: Arabic mobile Free chat message alignment fix.
   Phone-only and Arabic-only: keeps desktop and other languages untouched. */
@media (max-width:760px){
  html[lang="ar"] #chatModal .chat-card,
  html[lang="ar"] #chatModal .chat-modal-body,
  html[lang="ar"] #chatModal .chat-shell,
  html[lang="ar"] #chatModal .chat-main{
    direction:rtl !important;
  }

  html[lang="ar"] #chatModal .chat-message-list{
    direction:rtl !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:0 !important;
    padding:14px 0 12px !important;
    margin:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    text-align:right !important;
  }

  html[lang="ar"] #chatModal .chat-bubble,
  html[lang="ar"] #chatModal .chat-bubble.is-self,
  html[lang="ar"] #chatModal .chat-bubble:nth-child(5n+1),
  html[lang="ar"] #chatModal .chat-bubble:nth-child(5n+2),
  html[lang="ar"] #chatModal .chat-bubble:nth-child(5n+3),
  html[lang="ar"] #chatModal .chat-bubble:nth-child(5n+4),
  html[lang="ar"] #chatModal .chat-bubble:nth-child(5n+5){
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    justify-content:flex-start !important;
    align-self:stretch !important;
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    padding:0 0 14px !important;
    margin:0 !important;
    background:none !important;
    background-color:transparent !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    transform:none !important;
    text-align:right !important;
    direction:rtl !important;
  }

  html[lang="ar"] #chatModal .chat-bubble + .chat-bubble{
    border-top:1px solid rgba(255,248,220,.10) !important;
    padding-top:14px !important;
  }

  html[lang="ar"] #chatModal .chat-bubble::before,
  html[lang="ar"] #chatModal .chat-bubble::after,
  html[lang="ar"] #chatModal .chat-bubble.is-self::before,
  html[lang="ar"] #chatModal .chat-bubble.is-self::after{
    content:none !important;
    display:none !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-head,
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-head{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    margin:0 0 6px !important;
    padding:0 !important;
    text-align:right !important;
    direction:rtl !important;
    color:rgba(255,248,220,.78) !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-avatar{
    display:none !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-head .chat-name-btn,
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-head .chat-name-btn{
    flex:0 1 auto !important;
    max-width:70% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    color:#fff3c7 !important;
    font-size:13px !important;
    font-weight:900 !important;
    line-height:1.25 !important;
    text-align:right !important;
    direction:rtl !important;
    unicode-bidi:plaintext !important;
    overflow-wrap:anywhere !important;
    text-shadow:none !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-time,
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-time{
    flex:0 0 auto !important;
    margin:0 !important;
    color:rgba(255,248,220,.62) !important;
    font-size:11px !important;
    font-weight:800 !important;
    line-height:1.25 !important;
    text-align:left !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
    white-space:nowrap !important;
    opacity:1 !important;
    text-shadow:none !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-text,
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-text{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    background:none !important;
    background-color:transparent !important;
    border:none !important;
    box-shadow:none !important;
    color:#fffdf2 !important;
    font-size:16px !important;
    font-weight:800 !important;
    line-height:1.58 !important;
    text-align:right !important;
    direction:rtl !important;
    unicode-bidi:plaintext !important;
    white-space:pre-wrap !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    text-shadow:0 1px 0 rgba(0,0,0,.16) !important;
  }

  html[lang="ar"] #chatModal .chat-message-input,
  html[lang="ar"] #chatModal .chat-message-input::placeholder{
    direction:rtl !important;
    text-align:right !important;
    unicode-bidi:plaintext !important;
  }

  html[lang="ar"] #chatModal .chat-modal-actions{
    direction:rtl !important;
    justify-content:flex-start !important;
  }

  html[lang="ar"] #chatModal #sendChatMessageBtn{
    margin-left:0 !important;
    margin-right:auto !important;
  }
}

/* v2.6.1: mobile sticky-note link board redesign.
   Mobile-only: turns the top link area into separate pastel post-it cards.
   Desktop rules are untouched. */
@media (max-width:760px){
  html body .page .hero > .hero-actions,
  html body .page .hero .hero-actions{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:13px 12px !important;
    width:min(92vw, 640px) !important;
    max-width:min(92vw, 640px) !important;
    margin:28px auto 34px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    outline:0 !important;
    overflow:visible !important;
    align-items:stretch !important;
  }

  html body .page .hero .hero-actions::before,
  html body .page .hero .hero-actions::after{
    content:none !important;
    display:none !important;
  }

  html body .page .hero .hero-actions > *,
  html body .page .hero .hero-actions > button,
  html body .page .hero .hero-actions > div,
  html body .page .hero .hero-actions > details{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:76px !important;
    margin:0 !important;
    padding:18px 15px 16px !important;
    border:1px solid rgba(67,44,26,.16) !important;
    border-radius:18px !important;
    background:#fff1a8 !important;
    color:#4d372b !important;
    box-shadow:0 9px 0 rgba(43,28,14,.12), 0 18px 30px rgba(0,0,0,.16) !important;
    transform:none !important;
    text-align:left !important;
    text-decoration:none !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:5px !important;
    position:relative !important;
    overflow:visible !important;
    font-family:inherit !important;
    font-size:clamp(18px, 5.3vw, 25px) !important;
    font-weight:950 !important;
    line-height:1.05 !important;
    letter-spacing:-.02em !important;
    text-shadow:none !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  html body .page .hero .hero-actions > *::after{
    content:"" !important;
    position:absolute !important;
    top:-10px !important;
    left:50% !important;
    width:58px !important;
    height:18px !important;
    border-radius:8px !important;
    background:rgba(255,255,255,.58) !important;
    box-shadow:0 2px 6px rgba(0,0,0,.10) !important;
    transform:translateX(-50%) rotate(-2deg) !important;
    pointer-events:none !important;
  }

  html body .page .hero .hero-actions > *::before{
    display:block !important;
    margin:0 0 5px !important;
    font-size:22px !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    text-decoration:none !important;
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.55)) !important;
  }

  html body .page .hero .hero-actions #openComposeBtn{
    grid-column:1 / -1 !important;
    order:1 !important;
    min-height:92px !important;
    padding:22px 20px 20px !important;
    background:#fff0a5 !important;
    color:#cf7296 !important;
    font-size:clamp(26px, 7.4vw, 34px) !important;
    transform:rotate(-.7deg) !important;
  }

  html body .page .hero .hero-actions #openComposeBtn::before{ content:"✎" !important; }

  html body .page .hero .hero-actions .mobile-collections-picker{
    order:2 !important;
    background:#fff6bd !important;
    transform:rotate(.55deg) !important;
  }

  html body .page .hero .hero-actions .mobile-collections-picker::before{ content:"🗂️" !important; }

  html body .page .hero .hero-actions #openChatBtn{
    order:3 !important;
    background:#ffd8e8 !important;
    color:#c76093 !important;
    transform:rotate(-.55deg) !important;
  }

  html body .page .hero .hero-actions #openChatBtn::before{ content:"💬" !important; }

  html body .page .hero .hero-actions .mobile-language-picker{
    order:4 !important;
    background:#dff5ff !important;
    transform:rotate(-.4deg) !important;
  }

  html body .page .hero .hero-actions .mobile-language-picker::before{ content:"🌐" !important; }

  html body .page .hero .hero-actions #coffeeQuickLink{
    grid-column:1 / -1 !important;
    order:5 !important;
    min-height:78px !important;
    background:#ffe6bf !important;
    transform:rotate(.45deg) !important;
  }

  html body .page .hero .hero-actions #coffeeQuickLink::before{ content:"☕" !important; }

  html body .page .hero .hero-actions .top-icon-menu,
  html body .page .hero .hero-actions .language-menu,
  html body .page .hero .hero-actions .collections-menu,
  html body .page .hero .hero-actions .hero-link-btn[data-i18n="view_unanswered_notes"]{
    display:none !important;
  }

  html body .page .hero .hero-actions #openChatBtn .chat-launch-icon{
    display:none !important;
  }

  html body .page .hero .hero-actions .mobile-inline-label,
  html body .page .hero .hero-actions .mobile-language-visible-label,
  html body .page .hero .hero-actions .mobile-collections-visible-label{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    color:inherit !important;
    opacity:1 !important;
    font:inherit !important;
    line-height:1.08 !important;
    text-align:inherit !important;
    text-decoration:none !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    pointer-events:none !important;
  }

  html body .page .hero .hero-actions .mobile-language-select,
  html body .page .hero .hero-actions .mobile-collections-select{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:18px !important;
    opacity:0 !important;
    appearance:none !important;
    -webkit-appearance:none !important;
    cursor:pointer !important;
  }

  html body .page .hero .hero-actions > *:active{
    transform:translateY(2px) rotate(0deg) !important;
    box-shadow:0 5px 0 rgba(43,28,14,.12), 0 10px 18px rgba(0,0,0,.14) !important;
  }

  html body .page .hero .hero-actions #openComposeBtn:active,
  html body .page .hero .hero-actions #coffeeQuickLink:active{
    transform:translateY(2px) !important;
  }
}

/* v2.6.1-ar: apply the same mobile post-it design to Arabic with RTL text flow. */
@media (max-width:760px){
  html[lang="ar"] body .page .hero > .hero-actions,
  html[lang="ar"] body .page .hero .hero-actions{
    direction:rtl !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    text-align:right !important;
  }

  html[lang="ar"] body .page .hero .hero-actions > *,
  html[lang="ar"] body .page .hero .hero-actions > button,
  html[lang="ar"] body .page .hero .hero-actions > div,
  html[lang="ar"] body .page .hero .hero-actions > details{
    direction:rtl !important;
    text-align:right !important;
    align-items:flex-end !important;
    justify-content:center !important;
  }

  html[lang="ar"] body .page .hero .hero-actions .mobile-inline-label,
  html[lang="ar"] body .page .hero .hero-actions .mobile-language-visible-label,
  html[lang="ar"] body .page .hero .hero-actions .mobile-collections-visible-label,
  html[lang="ar"] body .page .hero .hero-actions #openChatBtn span,
  html[lang="ar"] body .page .hero .hero-actions #coffeeQuickLink{
    direction:rtl !important;
    text-align:right !important;
    unicode-bidi:plaintext !important;
  }
}

/* v2.6.2: mobile post-it language card restore.
   Mobile-only: guarantees the language selector remains visible as a full-width sticky note.
   Desktop rules are untouched. */
@media (max-width:760px){
  html body .page .hero .hero-actions > .mobile-language-picker{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    grid-column:1 / -1 !important;
    order:4 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:78px !important;
    margin:0 !important;
    padding:18px 15px 16px !important;
    border:1px solid rgba(67,44,26,.16) !important;
    border-radius:18px !important;
    background:#dff5ff !important;
    color:#4d372b !important;
    box-shadow:0 9px 0 rgba(43,28,14,.12), 0 18px 30px rgba(0,0,0,.16) !important;
    transform:rotate(-.4deg) !important;
    position:relative !important;
    z-index:2 !important;
    overflow:visible !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    text-align:left !important;
    pointer-events:auto !important;
  }

  html body .page .hero .hero-actions > .mobile-language-picker::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    top:-10px !important;
    left:50% !important;
    width:58px !important;
    height:18px !important;
    border-radius:8px !important;
    background:rgba(255,255,255,.58) !important;
    box-shadow:0 2px 6px rgba(0,0,0,.10) !important;
    transform:translateX(-50%) rotate(-2deg) !important;
    pointer-events:none !important;
  }

  html body .page .hero .hero-actions > .mobile-language-picker::before{
    content:"" !important;
    display:none !important;
  }

  html body .page .hero .hero-actions > .mobile-language-picker .mobile-language-visible-label{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    color:inherit !important;
    font:inherit !important;
    line-height:1.08 !important;
    text-align:inherit !important;
    text-decoration:underline !important;
    text-decoration-thickness:2px !important;
    text-underline-offset:4px !important;
    text-decoration-color:rgba(183,116,102,.42) !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    pointer-events:none !important;
  }

  html body .page .hero .hero-actions > .mobile-language-picker .mobile-language-select{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:18px !important;
    opacity:0 !important;
    color:transparent !important;
    background:transparent !important;
    cursor:pointer !important;
    z-index:3 !important;
    appearance:none !important;
    -webkit-appearance:none !important;
  }

  html body .page .hero .hero-actions > #coffeeQuickLink{
    order:5 !important;
    grid-column:1 / -1 !important;
  }

  html[lang="ar"] body .page .hero .hero-actions > .mobile-language-picker{
    direction:rtl !important;
    text-align:right !important;
    align-items:flex-end !important;
  }

  html[lang="ar"] body .page .hero .hero-actions > .mobile-language-picker .mobile-language-visible-label{
    direction:rtl !important;
    text-align:right !important;
    unicode-bidi:plaintext !important;
  }
}

/* v2.6.3: mobile post-it overlap fix. Desktop rules are untouched. */
@media (max-width:760px){
  html body .page .hero .hero-actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    column-gap:12px !important;
    row-gap:18px !important;
    overflow:visible !important;
    align-items:stretch !important;
    isolation:isolate !important;
  }

  html body .page .hero .hero-actions > #openComposeBtn,
  html body .page .hero .hero-actions > .mobile-collections-picker,
  html body .page .hero .hero-actions > #openChatBtn,
  html body .page .hero .hero-actions > .mobile-language-picker,
  html body .page .hero .hero-actions > #coffeeQuickLink{
    position:relative !important;
    inset:auto !important;
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    margin:0 !important;
    overflow:visible !important;
    z-index:1 !important;
    transform:none !important;
    box-sizing:border-box !important;
  }

  html body .page .hero .hero-actions > #openComposeBtn{grid-column:1 / -1 !important;order:1 !important;min-height:92px !important;}
  html body .page .hero .hero-actions > .mobile-collections-picker{grid-column:1 / 2 !important;order:2 !important;min-height:76px !important;}
  html body .page .hero .hero-actions > #openChatBtn{grid-column:2 / 3 !important;order:3 !important;min-height:76px !important;}
  html body .page .hero .hero-actions > .mobile-language-picker{grid-column:1 / -1 !important;order:4 !important;min-height:82px !important;}
  html body .page .hero .hero-actions > #coffeeQuickLink{grid-column:1 / -1 !important;order:5 !important;min-height:82px !important;}

  html body .page .hero .hero-actions > #openComposeBtn::after,
  html body .page .hero .hero-actions > .mobile-collections-picker::after,
  html body .page .hero .hero-actions > #openChatBtn::after,
  html body .page .hero .hero-actions > .mobile-language-picker::after,
  html body .page .hero .hero-actions > #coffeeQuickLink::after{
    top:-9px !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) rotate(-2deg) !important;
    z-index:2 !important;
    pointer-events:none !important;
  }

  html body .page .hero .hero-actions > .mobile-language-picker .mobile-language-select,
  html body .page .hero .hero-actions > .mobile-collections-picker .mobile-collections-select{
    position:absolute !important;
    inset:0 !important;
    z-index:4 !important;
  }

  html[lang="ar"] body .page .hero .hero-actions{direction:rtl !important;}
  html[lang="ar"] body .page .hero .hero-actions > #openComposeBtn,
  html[lang="ar"] body .page .hero .hero-actions > .mobile-collections-picker,
  html[lang="ar"] body .page .hero .hero-actions > #openChatBtn,
  html[lang="ar"] body .page .hero .hero-actions > .mobile-language-picker,
  html[lang="ar"] body .page .hero .hero-actions > #coffeeQuickLink{
    direction:rtl !important;
    text-align:right !important;
    align-items:flex-end !important;
  }
}

/* v2.6.4: final mobile post-it board layout — varied cards, no overlap, language always visible.
   Mobile-only. Desktop rules are untouched. Includes Arabic/RTL support. */
@media (max-width:760px){
  html body .page .hero .hero-actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-areas:
      "write write"
      "collections chat"
      "language language"
      "coffee coffee" !important;
    gap:15px 12px !important;
    width:min(92vw, 640px) !important;
    max-width:min(92vw, 640px) !important;
    margin:28px auto 34px !important;
    padding:0 !important;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    align-items:stretch !important;
    justify-items:stretch !important;
    isolation:isolate !important;
  }

  html body .page .hero .hero-actions > .language-menu,
  html body .page .hero .hero-actions > .collections-menu,
  html body .page .hero .hero-actions > .top-icon-menu,
  html body .page .hero .hero-actions > .hero-link-btn[data-i18n="view_unanswered_notes"]{
    display:none !important;
  }

  html body .page .hero .hero-actions > #openComposeBtn,
  html body .page .hero .hero-actions > .mobile-collections-picker,
  html body .page .hero .hero-actions > #openChatBtn,
  html body .page .hero .hero-actions > .mobile-language-picker,
  html body .page .hero .hero-actions > #coffeeQuickLink{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    min-height:74px !important;
    margin:0 !important;
    padding:17px 15px 15px !important;
    box-sizing:border-box !important;
    overflow:visible !important;
    border:1px solid rgba(75,49,27,.17) !important;
    border-radius:18px !important;
    color:#4b362d !important;
    text-align:left !important;
    text-decoration:none !important;
    text-shadow:none !important;
    font-family:inherit !important;
    font-size:clamp(18px, 5.2vw, 25px) !important;
    font-weight:950 !important;
    line-height:1.06 !important;
    letter-spacing:-.02em !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:5px !important;
    z-index:1 !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  html body .page .hero .hero-actions > #openComposeBtn{
    grid-area:write !important;
    min-height:98px !important;
    padding:24px 20px 21px !important;
    background:#fff0a4 !important;
    color:#cf7296 !important;
    border-radius:0 !important;
    font-size:clamp(30px, 8.2vw, 42px) !important;
    transform:rotate(-.55deg) !important;
    box-shadow:0 8px 0 rgba(43,28,14,.11), 0 18px 28px rgba(0,0,0,.13) !important;
  }

  html body .page .hero .hero-actions > .mobile-collections-picker{
    grid-area:collections !important;
    min-height:76px !important;
    background:#fff8c8 !important;
    border-radius:0 24px 24px 24px !important;
    transform:rotate(.75deg) !important;
    box-shadow:0 7px 0 rgba(43,28,14,.12), 0 14px 22px rgba(0,0,0,.12) !important;
  }

  html body .page .hero .hero-actions > #openChatBtn{
    grid-area:chat !important;
    min-height:66px !important;
    align-self:start !important;
    background:#ffd5e8 !important;
    color:#c76093 !important;
    border-radius:0 !important;
    transform:rotate(-.45deg) !important;
    box-shadow:0 6px 0 rgba(43,28,14,.10), 0 12px 20px rgba(0,0,0,.11) !important;
  }

  html body .page .hero .hero-actions > .mobile-language-picker{
    grid-area:language !important;
    min-height:86px !important;
    background:#dff6ff !important;
    border-radius:20px !important;
    transform:rotate(-.35deg) !important;
    box-shadow:0 9px 0 rgba(43,28,14,.13), 0 18px 28px rgba(0,0,0,.14) !important;
    z-index:3 !important;
  }

  html body .page .hero .hero-actions > #coffeeQuickLink{
    grid-area:coffee !important;
    min-height:86px !important;
    padding-left:48px !important;
    background:#ffe5bc !important;
    border-radius:22px !important;
    transform:rotate(.45deg) !important;
    box-shadow:0 9px 0 rgba(43,28,14,.13), 0 18px 28px rgba(0,0,0,.14) !important;
  }

  html body .page .hero .hero-actions > #openComposeBtn::after,
  html body .page .hero .hero-actions > .mobile-collections-picker::after,
  html body .page .hero .hero-actions > #openChatBtn::after,
  html body .page .hero .hero-actions > .mobile-language-picker::after,
  html body .page .hero .hero-actions > #coffeeQuickLink::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    top:-9px !important;
    left:50% !important;
    right:auto !important;
    width:58px !important;
    height:18px !important;
    border-radius:8px !important;
    background:rgba(255,255,255,.58) !important;
    box-shadow:0 2px 6px rgba(0,0,0,.10) !important;
    transform:translateX(-50%) rotate(-2deg) !important;
    pointer-events:none !important;
    z-index:2 !important;
  }

  html body .page .hero .hero-actions > .mobile-collections-picker::after,
  html body .page .hero .hero-actions > #openChatBtn::after{
    content:none !important;
    display:none !important;
  }

  html body .page .hero .hero-actions > #coffeeQuickLink::before{
    content:"☕" !important;
    position:absolute !important;
    left:16px !important;
    top:15px !important;
    font-size:22px !important;
    line-height:1 !important;
    text-decoration:none !important;
  }

  html body .page .hero .hero-actions #openChatBtn .chat-launch-icon{
    display:none !important;
  }

  html body .page .hero .hero-actions .mobile-inline-label,
  html body .page .hero .hero-actions .mobile-language-visible-label,
  html body .page .hero .hero-actions .mobile-collections-visible-label,
  html body .page .hero .hero-actions #openChatBtn span{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    color:inherit !important;
    font:inherit !important;
    line-height:1.08 !important;
    text-align:inherit !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    pointer-events:none !important;
  }

  html body .page .hero .hero-actions .mobile-language-visible-label{
    text-decoration:underline !important;
    text-decoration-thickness:2px !important;
    text-underline-offset:4px !important;
    text-decoration-color:rgba(183,116,102,.42) !important;
  }

  html body .page .hero .hero-actions .mobile-language-select,
  html body .page .hero .hero-actions .mobile-collections-select{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:inherit !important;
    opacity:0 !important;
    color:transparent !important;
    background:transparent !important;
    cursor:pointer !important;
    z-index:5 !important;
    appearance:none !important;
    -webkit-appearance:none !important;
  }

  html body .page .hero .hero-actions > #openComposeBtn:active,
  html body .page .hero .hero-actions > .mobile-collections-picker:active,
  html body .page .hero .hero-actions > #openChatBtn:active,
  html body .page .hero .hero-actions > .mobile-language-picker:active,
  html body .page .hero .hero-actions > #coffeeQuickLink:active{
    transform:translateY(2px) rotate(0deg) !important;
    box-shadow:0 5px 0 rgba(43,28,14,.11), 0 9px 18px rgba(0,0,0,.12) !important;
  }

  html[lang="ar"] body .page .hero .hero-actions{
    direction:rtl !important;
  }

  html[lang="ar"] body .page .hero .hero-actions > #openComposeBtn,
  html[lang="ar"] body .page .hero .hero-actions > .mobile-collections-picker,
  html[lang="ar"] body .page .hero .hero-actions > #openChatBtn,
  html[lang="ar"] body .page .hero .hero-actions > .mobile-language-picker,
  html[lang="ar"] body .page .hero .hero-actions > #coffeeQuickLink{
    direction:rtl !important;
    text-align:right !important;
    align-items:flex-end !important;
  }

  html[lang="ar"] body .page .hero .hero-actions > #coffeeQuickLink{
    padding-left:15px !important;
    padding-right:48px !important;
  }

  html[lang="ar"] body .page .hero .hero-actions > #coffeeQuickLink::before{
    left:auto !important;
    right:16px !important;
  }
}

/* v275: refine mobile post-it link cards - fewer tapes, better spacing and balance */
@media (max-width:760px){
  html body .page .hero .hero-actions{
    gap:18px 14px !important;
    margin-top:28px !important;
    margin-bottom:42px !important;
  }

  html body .page .hero .hero-actions > #openComposeBtn{
    transform:rotate(-1.05deg) !important;
    min-height:102px !important;
  }

  html body .page .hero .hero-actions > .mobile-collections-picker,
  html body .page .hero .hero-actions > #openChatBtn{
    min-height:82px !important;
    padding:17px 13px !important;
    align-self:stretch !important;
  }

  html body .page .hero .hero-actions > #openChatBtn{
    border-radius:8px 0 0 22px !important;
    box-shadow:0 7px 0 rgba(43,28,14,.12), 0 14px 22px rgba(0,0,0,.12) !important;
    transform:rotate(.55deg) !important;
  }

  html body .page .hero .hero-actions > .mobile-language-picker{
    width:96% !important;
    justify-self:center !important;
    min-height:78px !important;
    padding:18px 18px !important;
    font-size:clamp(23px, 6vw, 30px) !important;
    font-weight:760 !important;
    transform:rotate(-.55deg) !important;
  }

  html body .page .hero .hero-actions > #coffeeQuickLink{
    width:94% !important;
    justify-self:center !important;
    transform:rotate(.75deg) !important;
  }

  /* Keep tape only on the main writing card and coffee card for a cleaner handmade feel */
  html body .page .hero .hero-actions > .mobile-language-picker::after{
    content:none !important;
    display:none !important;
  }

  html body .page .hero .hero-actions > #openComposeBtn::after{
    top:-10px !important;
    left:50% !important;
    width:62px !important;
    height:18px !important;
    transform:translateX(-50%) rotate(-4deg) !important;
  }

  html body .page .hero .hero-actions > #coffeeQuickLink::after{
    top:-10px !important;
    left:18% !important;
    width:58px !important;
    height:18px !important;
    transform:rotate(3deg) !important;
  }

  html[lang="ar"] body .page .hero .hero-actions > #coffeeQuickLink::after{
    left:auto !important;
    right:18% !important;
  }
}


/* v276: apply refined mobile post-it card design explicitly to Arabic too.
   Mobile-only, desktop untouched. */
@media (max-width:760px){
  html[lang="ar"] body .page .hero .hero-actions{
    direction:rtl !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-areas:
      "write write"
      "collections chat"
      "language language"
      "coffee coffee" !important;
    gap:18px 14px !important;
    width:min(92vw, 640px) !important;
    max-width:min(92vw, 640px) !important;
    margin:28px auto 42px !important;
    padding:0 !important;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  html[lang="ar"] body .page .hero .hero-actions > #openComposeBtn,
  html[lang="ar"] body .page .hero .hero-actions > .mobile-collections-picker,
  html[lang="ar"] body .page .hero .hero-actions > #openChatBtn,
  html[lang="ar"] body .page .hero .hero-actions > .mobile-language-picker,
  html[lang="ar"] body .page .hero .hero-actions > #coffeeQuickLink{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    direction:rtl !important;
    text-align:right !important;
    align-items:flex-end !important;
    justify-content:center !important;
    position:relative !important;
    inset:auto !important;
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    overflow:visible !important;
    border:1px solid rgba(75,49,27,.17) !important;
    color:#4b362d !important;
    text-decoration:none !important;
    text-shadow:none !important;
    font-family:inherit !important;
    line-height:1.06 !important;
    letter-spacing:-.02em !important;
    flex-direction:column !important;
    gap:5px !important;
    z-index:1 !important;
  }

  html[lang="ar"] body .page .hero .hero-actions > #openComposeBtn{
    grid-area:write !important;
    min-height:102px !important;
    padding:24px 20px 21px !important;
    background:#fff0a4 !important;
    color:#cf7296 !important;
    border-radius:0 !important;
    font-size:clamp(30px, 8.2vw, 42px) !important;
    font-weight:950 !important;
    transform:rotate(1.05deg) !important;
    box-shadow:0 8px 0 rgba(43,28,14,.11), 0 18px 28px rgba(0,0,0,.13) !important;
  }

  html[lang="ar"] body .page .hero .hero-actions > .mobile-collections-picker{
    grid-area:collections !important;
    min-height:82px !important;
    padding:17px 13px !important;
    background:#fff8c8 !important;
    border-radius:24px 0 24px 24px !important;
    font-size:clamp(18px, 5.2vw, 25px) !important;
    font-weight:950 !important;
    transform:rotate(-.75deg) !important;
    box-shadow:0 7px 0 rgba(43,28,14,.12), 0 14px 22px rgba(0,0,0,.12) !important;
  }

  html[lang="ar"] body .page .hero .hero-actions > #openChatBtn{
    grid-area:chat !important;
    min-height:82px !important;
    padding:17px 13px !important;
    background:#ffd5e8 !important;
    color:#c76093 !important;
    border-radius:0 8px 22px 0 !important;
    font-size:clamp(18px, 5.2vw, 25px) !important;
    font-weight:950 !important;
    transform:rotate(-.55deg) !important;
    box-shadow:0 7px 0 rgba(43,28,14,.12), 0 14px 22px rgba(0,0,0,.12) !important;
  }

  html[lang="ar"] body .page .hero .hero-actions > .mobile-language-picker{
    grid-area:language !important;
    width:96% !important;
    justify-self:center !important;
    min-height:78px !important;
    padding:18px 18px !important;
    background:#dff6ff !important;
    border-radius:20px !important;
    font-size:clamp(23px, 6vw, 30px) !important;
    font-weight:760 !important;
    transform:rotate(.55deg) !important;
    box-shadow:0 9px 0 rgba(43,28,14,.13), 0 18px 28px rgba(0,0,0,.14) !important;
    z-index:3 !important;
  }

  html[lang="ar"] body .page .hero .hero-actions > #coffeeQuickLink{
    grid-area:coffee !important;
    width:94% !important;
    justify-self:center !important;
    min-height:86px !important;
    padding:18px 48px 18px 18px !important;
    background:#ffe5bc !important;
    border-radius:22px !important;
    font-size:clamp(18px, 5.2vw, 25px) !important;
    font-weight:950 !important;
    transform:rotate(-.75deg) !important;
    box-shadow:0 9px 0 rgba(43,28,14,.13), 0 18px 28px rgba(0,0,0,.14) !important;
  }

  html[lang="ar"] body .page .hero .hero-actions > #openComposeBtn::after,
  html[lang="ar"] body .page .hero .hero-actions > #coffeeQuickLink::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    top:-10px !important;
    width:62px !important;
    height:18px !important;
    border-radius:8px !important;
    background:rgba(255,255,255,.58) !important;
    box-shadow:0 2px 6px rgba(0,0,0,.10) !important;
    pointer-events:none !important;
    z-index:2 !important;
  }

  html[lang="ar"] body .page .hero .hero-actions > #openComposeBtn::after{
    right:50% !important;
    left:auto !important;
    transform:translateX(50%) rotate(4deg) !important;
  }

  html[lang="ar"] body .page .hero .hero-actions > #coffeeQuickLink::after{
    right:18% !important;
    left:auto !important;
    width:58px !important;
    transform:rotate(-3deg) !important;
  }

  html[lang="ar"] body .page .hero .hero-actions > .mobile-collections-picker::after,
  html[lang="ar"] body .page .hero .hero-actions > #openChatBtn::after,
  html[lang="ar"] body .page .hero .hero-actions > .mobile-language-picker::after{
    content:none !important;
    display:none !important;
  }

  html[lang="ar"] body .page .hero .hero-actions > #coffeeQuickLink::before{
    content:"☕" !important;
    position:absolute !important;
    right:16px !important;
    left:auto !important;
    top:15px !important;
    font-size:22px !important;
    line-height:1 !important;
    text-decoration:none !important;
  }

  html[lang="ar"] body .page .hero .hero-actions .mobile-inline-label,
  html[lang="ar"] body .page .hero .hero-actions .mobile-language-visible-label,
  html[lang="ar"] body .page .hero .hero-actions .mobile-collections-visible-label,
  html[lang="ar"] body .page .hero .hero-actions #openChatBtn span{
    direction:rtl !important;
    unicode-bidi:plaintext !important;
    text-align:right !important;
    width:100% !important;
  }

  html[lang="ar"] body .page .hero .hero-actions .mobile-language-select,
  html[lang="ar"] body .page .hero .hero-actions .mobile-collections-select{
    inset:0 !important;
    border-radius:inherit !important;
    z-index:5 !important;
  }
}

/* v277: slightly stronger chalkboard frame on mobile only */
@media (max-width:760px){
  html body .page{
    border-width:10px !important;
  }
}


/* v278: explicitly apply the stronger mobile chalkboard frame to Arabic RTL pages too */
@media (max-width:760px){
  html[lang="ar"] body .page{
    border-width:10px !important;
  }
}

/* v279: slightly shorten only the mobile post-it widths for Writing a feeling and Free chat */
@media (max-width:760px){
  html body .page .hero .hero-actions > #openComposeBtn{
    width:96% !important;
    justify-self:center !important;
  }

  html body .page .hero .hero-actions > #openChatBtn{
    width:94% !important;
    justify-self:center !important;
  }
}

/* v280: Arabic mobile free chat readability hard-fix.
   Keep every message on a clean 2-column row: time on the left,
   sender + text on the right. This prevents the overlapping/stacking
   that made the Arabic mobile room hard to read. */
@media (max-width:760px){
  html[lang="ar"] #chatModal .chat-message-list{
    direction:ltr !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:10px 0 14px !important;
  }

  html[lang="ar"] #chatModal .chat-bubble,
  html[lang="ar"] #chatModal .chat-bubble.is-self,
  html[lang="ar"] #chatModal .chat-bubble:nth-child(5n+1),
  html[lang="ar"] #chatModal .chat-bubble:nth-child(5n+2),
  html[lang="ar"] #chatModal .chat-bubble:nth-child(5n+3),
  html[lang="ar"] #chatModal .chat-bubble:nth-child(5n+4),
  html[lang="ar"] #chatModal .chat-bubble:nth-child(5n+5){
    display:grid !important;
    grid-template-columns:64px minmax(0,1fr) !important;
    grid-template-areas:
      "time name"
      ". text" !important;
    column-gap:12px !important;
    row-gap:4px !important;
    align-items:start !important;
    justify-items:stretch !important;
    align-self:stretch !important;
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:12px 0 14px !important;
    direction:ltr !important;
    text-align:initial !important;
    background:none !important;
    background-color:transparent !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    transform:none !important;
  }

  html[lang="ar"] #chatModal .chat-bubble + .chat-bubble{
    border-top:1px solid rgba(255,248,220,.10) !important;
    padding-top:14px !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-head,
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-head{
    display:contents !important;
    margin:0 !important;
    padding:0 !important;
    width:auto !important;
    min-height:0 !important;
    background:none !important;
    border:none !important;
    box-shadow:none !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-avatar{
    display:none !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-time,
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-time{
    grid-area:time !important;
    justify-self:start !important;
    align-self:start !important;
    margin:0 !important;
    padding-top:2px !important;
    color:rgba(255,248,220,.68) !important;
    font-size:12px !important;
    font-weight:800 !important;
    line-height:1.25 !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
    text-align:left !important;
    white-space:nowrap !important;
    text-shadow:none !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-head .chat-name-btn,
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-head .chat-name-btn{
    grid-area:name !important;
    display:block !important;
    justify-self:end !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    color:#fff3c7 !important;
    font-size:16px !important;
    font-weight:900 !important;
    line-height:1.32 !important;
    text-align:right !important;
    direction:auto !important;
    unicode-bidi:plaintext !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    text-shadow:none !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-text,
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-text{
    grid-area:text !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:none !important;
    background-color:transparent !important;
    border:none !important;
    box-shadow:none !important;
    color:#fffdf2 !important;
    font-size:17px !important;
    font-weight:800 !important;
    line-height:1.68 !important;
    text-align:right !important;
    direction:auto !important;
    unicode-bidi:plaintext !important;
    white-space:pre-wrap !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    text-shadow:0 1px 0 rgba(0,0,0,.16) !important;
  }

  html[lang="ar"] #chatModal .chat-composer-helper-row{
    direction:rtl !important;
    text-align:right !important;
    align-items:center !important;
  }

  html[lang="ar"] #chatModal .chat-modal-actions{
    direction:rtl !important;
    justify-content:flex-start !important;
  }
}


/* v282: Arabic mobile Free chat usability polish from phone screenshot.
   Goals: reduce vertical waste, keep messages compact, make the composer easier to use,
   and use app.js dir="auto" for mixed Arabic/English message content. */
@media (max-width:760px){
  html[lang="ar"] #chatModal .chat-card{
    height:100dvh !important;
    max-height:100dvh !important;
  }

  html[lang="ar"] #chatModal .chat-modal-body{
    overflow:hidden !important;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html[lang="ar"] #chatModal .chat-shell{
    height:100% !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
  }

  html[lang="ar"] #chatModal .chat-sidebar{
    display:none !important;
  }

  html[lang="ar"] #chatModal .chat-main{
    flex:1 1 auto !important;
    min-height:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    padding:0 !important;
    direction:rtl !important;
    text-align:right !important;
  }

  html[lang="ar"] #chatModal .chat-room-banner{
    flex:0 0 auto !important;
    padding:10px 12px !important;
    min-height:0 !important;
    direction:rtl !important;
    text-align:right !important;
  }

  html[lang="ar"] #chatModal .chat-room-heading-inline,
  html[lang="ar"] #chatModal .chat-room-copy,
  html[lang="ar"] #chatModal .chat-room-banner-actions{
    direction:rtl !important;
    text-align:right !important;
  }

  html[lang="ar"] #chatModal .chat-message-list{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:4px 0 8px !important;
    margin:0 !important;
    gap:0 !important;
    direction:ltr !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
  }

  html[lang="ar"] #chatModal .chat-message-list::before{
    content:none !important;
    display:none !important;
  }

  html[lang="ar"] #chatModal .chat-bubble,
  html[lang="ar"] #chatModal .chat-bubble.is-self,
  html[lang="ar"] #chatModal .chat-bubble:nth-child(5n+1),
  html[lang="ar"] #chatModal .chat-bubble:nth-child(5n+2),
  html[lang="ar"] #chatModal .chat-bubble:nth-child(5n+3),
  html[lang="ar"] #chatModal .chat-bubble:nth-child(5n+4),
  html[lang="ar"] #chatModal .chat-bubble:nth-child(5n+5){
    display:grid !important;
    grid-template-columns:56px minmax(0,1fr) !important;
    grid-template-areas:
      "time name"
      ". text" !important;
    column-gap:10px !important;
    row-gap:2px !important;
    align-items:start !important;
    justify-items:stretch !important;
    align-self:stretch !important;
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:9px 0 10px !important;
    background:none !important;
    background-color:transparent !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    transform:none !important;
    direction:ltr !important;
    text-align:initial !important;
  }

  html[lang="ar"] #chatModal .chat-bubble + .chat-bubble{
    border-top:1px solid rgba(255,248,220,.12) !important;
  }

  html[lang="ar"] #chatModal .chat-bubble::before,
  html[lang="ar"] #chatModal .chat-bubble::after,
  html[lang="ar"] #chatModal .chat-bubble.is-self::before,
  html[lang="ar"] #chatModal .chat-bubble.is-self::after{
    content:none !important;
    display:none !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-head,
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-head{
    display:contents !important;
    margin:0 !important;
    padding:0 !important;
    width:auto !important;
    min-height:0 !important;
    background:none !important;
    border:none !important;
    box-shadow:none !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-avatar{
    display:none !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-time,
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-time,
  html[lang="ar"] #chatModal .chat-bubble-time[dir="ltr"],
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-time[dir="ltr"]{
    grid-area:time !important;
    justify-self:start !important;
    align-self:start !important;
    max-width:56px !important;
    margin:0 !important;
    padding-top:2px !important;
    color:rgba(255,248,220,.68) !important;
    font-size:12px !important;
    font-weight:800 !important;
    line-height:1.25 !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
    text-align:left !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    text-shadow:none !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-head .chat-name-btn,
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-head .chat-name-btn{
    grid-area:name !important;
    display:block !important;
    justify-self:end !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    color:#fff3c7 !important;
    font-size:15px !important;
    font-weight:900 !important;
    line-height:1.28 !important;
    text-align:right !important;
    unicode-bidi:plaintext !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    text-shadow:none !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-head .chat-name-btn[dir="auto"],
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-head .chat-name-btn[dir="auto"]{
    direction:rtl !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-text,
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-text{
    grid-area:text !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    background:none !important;
    background-color:transparent !important;
    border:none !important;
    box-shadow:none !important;
    color:#fffdf2 !important;
    font-size:16px !important;
    font-weight:800 !important;
    line-height:1.5 !important;
    text-align:right !important;
    unicode-bidi:plaintext !important;
    white-space:pre-wrap !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    text-shadow:0 1px 0 rgba(0,0,0,.16) !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-text[dir="auto"],
  html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-text[dir="auto"]{
    direction:rtl !important;
  }

  html[lang="ar"] #chatModal .chat-composer{
    flex:0 0 auto !important;
    padding:8px 0 0 !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    direction:rtl !important;
    text-align:right !important;
  }

  html[lang="ar"] #chatModal .chat-composer-form{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
  }

  html[lang="ar"] #chatModal .chat-message-input{
    height:82px !important;
    min-height:82px !important;
    max-height:110px !important;
    padding:16px 18px !important;
    font-size:16px !important;
    line-height:1.55 !important;
    direction:rtl !important;
    text-align:right !important;
    unicode-bidi:plaintext !important;
  }

  html[lang="ar"] #chatModal .chat-message-input::placeholder{
    direction:rtl !important;
    text-align:right !important;
    unicode-bidi:plaintext !important;
  }

  html[lang="ar"] #chatModal .chat-composer-helper-row{
    display:none !important;
  }

  html[lang="ar"] #chatModal .chat-modal-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
    direction:rtl !important;
    justify-content:stretch !important;
  }

  html[lang="ar"] #chatModal .chat-modal-actions .btn,
  html[lang="ar"] #chatModal #sendChatMessageBtn{
    width:100% !important;
    min-height:52px !important;
    margin:0 !important;
  }
}


/* v283: Arabic mobile free chat micro-adjustments from latest phone screenshot.
   Scope locked to mobile + Arabic only, so desktop remains unchanged.
   Changes requested:
   - center the composer area horizontally
   - remove the visible border/background from the send button so only the text shows
   - keep textarea centered
   - enlarge the OK Safe Space / room title line
   - show "Tap a name to open a private chat." as the second line in the banner
*/
@media (max-width:760px){
  html[lang="ar"] #chatModal .chat-room-banner{
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    padding:12px 12px 8px !important;
  }

  html[lang="ar"] #chatModal .chat-room-banner > div:first-child{
    width:100% !important;
    text-align:center !important;
  }

  html[lang="ar"] #chatModal .chat-room-heading-inline{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    text-align:center !important;
  }

  html[lang="ar"] #chatModal .chat-room-kicker,
  html[lang="ar"] #chatModal .chat-room-title{
    font-size:18px !important;
    line-height:1.25 !important;
    font-weight:900 !important;
    letter-spacing:.01em !important;
  }

  html[lang="ar"] #chatModal .chat-room-copy{
    display:block !important;
    margin-top:6px !important;
    min-height:1.4em !important;
    font-size:0 !important;
    line-height:0 !important;
    text-align:center !important;
    color:rgba(255,248,220,.82) !important;
  }

  html[lang="ar"] #chatModal .chat-room-copy::before{
    content:"Tap a name to open a private chat.";
    display:block !important;
    font-size:12px !important;
    line-height:1.45 !important;
    font-weight:700 !important;
    letter-spacing:.01em !important;
  }

  html[lang="ar"] #chatModal .chat-composer{
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    padding-top:8px !important;
  }

  html[lang="ar"] #chatModal .chat-composer-form{
    width:100% !important;
    align-items:center !important;
    justify-content:center !important;
  }

  html[lang="ar"] #chatModal .chat-message-input{
    width:min(100%, 92%) !important;
    margin-inline:auto !important;
    min-height:96px !important;
    height:96px !important;
  }

  html[lang="ar"] #chatModal .chat-composer-footer{
    width:100% !important;
    align-items:center !important;
    justify-content:center !important;
  }

  html[lang="ar"] #chatModal .chat-composer-helper-row,
  html[lang="ar"] #chatModal .chat-modal-actions{
    width:100% !important;
    justify-content:center !important;
    text-align:center !important;
  }

  html[lang="ar"] #chatModal #chatBackToStartBtn{
    display:none !important;
  }

  html[lang="ar"] #chatModal .chat-send-primary,
  html[lang="ar"] #chatModal .chat-send-primary:hover,
  html[lang="ar"] #chatModal .chat-send-primary:focus,
  html[lang="ar"] #chatModal .chat-send-primary:active{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:0 !important;
    margin:0 auto !important;
    padding:0 !important;
    background:none !important;
    background-color:transparent !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    color:#fff7d7 !important;
    font-size:16px !important;
    font-weight:900 !important;
    line-height:1.35 !important;
    text-decoration:none !important;
    transform:none !important;
  }
}


/* v284: stronger Arabic mobile chat header/composer patch.
   Important: this is mobile + RTL chat modal only.
   It also pairs with index.html cache-busting: styles.css?v=284.
*/
@media screen and (max-width:760px){
  html[dir="rtl"] #chatModal .chat-modal-head,
  body[dir="rtl"] #chatModal .chat-modal-head,
  body.is-rtl #chatModal .chat-modal-head{
    align-items:flex-start !important;
  }

  html[dir="rtl"] #chatModal .chat-modal-titlewrap,
  body[dir="rtl"] #chatModal .chat-modal-titlewrap,
  body.is-rtl #chatModal .chat-modal-titlewrap{
    flex:1 1 auto !important;
    min-width:0 !important;
    text-align:right !important;
  }

  html[dir="rtl"] #chatModal .chat-modal-titleline,
  body[dir="rtl"] #chatModal .chat-modal-titleline,
  body.is-rtl #chatModal .chat-modal-titleline{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:baseline !important;
    justify-content:flex-end !important;
    gap:10px !important;
    text-align:right !important;
  }

  html[dir="rtl"] #chatModal .chat-modal-titleline::after,
  body[dir="rtl"] #chatModal .chat-modal-titleline::after,
  body.is-rtl #chatModal .chat-modal-titleline::after{
    content:"Tap a name to open a private chat.";
    flex:0 0 100% !important;
    display:block !important;
    margin-top:4px !important;
    color:rgba(255,248,220,.80) !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.45 !important;
    letter-spacing:.01em !important;
    text-align:right !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
  }

  html[dir="rtl"] #chatModal .chat-modal-head .modal-kicker,
  body[dir="rtl"] #chatModal .chat-modal-head .modal-kicker,
  body.is-rtl #chatModal .chat-modal-head .modal-kicker{
    font-size:15px !important;
    line-height:1.2 !important;
    font-weight:900 !important;
    letter-spacing:.08em !important;
    margin:0 !important;
    white-space:nowrap !important;
  }

  html[dir="rtl"] #chatModal #chatModalTitle,
  body[dir="rtl"] #chatModal #chatModalTitle,
  body.is-rtl #chatModal #chatModalTitle{
    font-size:22px !important;
    line-height:1.2 !important;
    font-weight:900 !important;
    margin:0 !important;
    white-space:nowrap !important;
  }

  html[dir="rtl"] #chatModal .chat-composer,
  body[dir="rtl"] #chatModal .chat-composer,
  body.is-rtl #chatModal .chat-composer{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  html[dir="rtl"] #chatModal .chat-composer-form,
  body[dir="rtl"] #chatModal .chat-composer-form,
  body.is-rtl #chatModal .chat-composer-form{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
  }

  html[dir="rtl"] #chatModal .chat-message-input,
  body[dir="rtl"] #chatModal .chat-message-input,
  body.is-rtl #chatModal .chat-message-input{
    width:min(92%, 640px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    align-self:center !important;
  }

  html[dir="rtl"] #chatModal .chat-composer-footer,
  body[dir="rtl"] #chatModal .chat-composer-footer,
  body.is-rtl #chatModal .chat-composer-footer,
  html[dir="rtl"] #chatModal .chat-modal-actions,
  body[dir="rtl"] #chatModal .chat-modal-actions,
  body.is-rtl #chatModal .chat-modal-actions{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  html[dir="rtl"] #chatModal #chatBackToStartBtn,
  body[dir="rtl"] #chatModal #chatBackToStartBtn,
  body.is-rtl #chatModal #chatBackToStartBtn{
    display:none !important;
  }

  html[dir="rtl"] #chatModal .chat-send-primary,
  html[dir="rtl"] #chatModal .chat-send-primary:hover,
  html[dir="rtl"] #chatModal .chat-send-primary:focus,
  html[dir="rtl"] #chatModal .chat-send-primary:active,
  body[dir="rtl"] #chatModal .chat-send-primary,
  body[dir="rtl"] #chatModal .chat-send-primary:hover,
  body[dir="rtl"] #chatModal .chat-send-primary:focus,
  body[dir="rtl"] #chatModal .chat-send-primary:active,
  body.is-rtl #chatModal .chat-send-primary,
  body.is-rtl #chatModal .chat-send-primary:hover,
  body.is-rtl #chatModal .chat-send-primary:focus,
  body.is-rtl #chatModal .chat-send-primary:active{
    appearance:none !important;
    -webkit-appearance:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:0 !important;
    max-width:max-content !important;
    margin:0 auto !important;
    padding:0 !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:0 !important;
    border-color:transparent !important;
    border-radius:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    color:#fff7d7 !important;
    font-size:17px !important;
    font-weight:900 !important;
    line-height:1.35 !important;
    text-decoration:none !important;
    transform:none !important;
  }

  html[dir="rtl"] #chatModal .chat-send-primary::before,
  html[dir="rtl"] #chatModal .chat-send-primary::after,
  body[dir="rtl"] #chatModal .chat-send-primary::before,
  body[dir="rtl"] #chatModal .chat-send-primary::after,
  body.is-rtl #chatModal .chat-send-primary::before,
  body.is-rtl #chatModal .chat-send-primary::after{
    content:none !important;
    display:none !important;
  }
}


/* v285: final hard lock for Arabic mobile chat header + composer only.
   Desktop is untouched because every rule is inside max-width:760px and #chatModal.
   The body class is added by app.js only when currentLanguage === 'ar'. */
@media screen and (max-width:760px){
  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-head{
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:10px !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-titlewrap{
    flex:1 1 auto !important;
    min-width:0 !important;
    width:100% !important;
    text-align:right !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-titleline{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-items:baseline !important;
    justify-content:flex-end !important;
    gap:9px !important;
    width:100% !important;
    text-align:right !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-head .modal-kicker{
    order:2 !important;
    display:inline-block !important;
    margin:0 !important;
    padding:0 !important;
    color:#ffd8df !important;
    font-size:16px !important;
    line-height:1.15 !important;
    font-weight:900 !important;
    letter-spacing:.10em !important;
    white-space:nowrap !important;
    text-shadow:0 1px 0 rgba(0,0,0,.22) !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal #chatModalTitle{
    order:1 !important;
    display:inline-block !important;
    margin:0 !important;
    padding:0 !important;
    color:#fff8df !important;
    font-size:24px !important;
    line-height:1.15 !important;
    font-weight:900 !important;
    white-space:nowrap !important;
    text-shadow:0 1px 0 rgba(0,0,0,.22) !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-titleline::after{
    content:"Tap a name to open a private chat." !important;
    order:3 !important;
    flex:0 0 100% !important;
    display:block !important;
    margin-top:5px !important;
    color:rgba(255,248,220,.86) !important;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.4 !important;
    letter-spacing:.01em !important;
    text-align:right !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
    white-space:normal !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-composer{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-composer-form{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal textarea#chatMessageInput.chat-message-input,
  body.is-arabic-mobile-chat-fix #chatModal #chatMessageInput{
    display:block !important;
    box-sizing:border-box !important;
    width:92% !important;
    max-width:92% !important;
    min-width:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    align-self:center !important;
    text-align:right !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-composer-footer{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-composer-helper-row{
    display:none !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-actions{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    max-width:100% !important;
    margin:10px auto 0 !important;
    padding:0 !important;
    gap:0 !important;
    text-align:center !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal button#chatBackToStartBtn{
    display:none !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.chat-send-primary,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.chat-send-primary:hover,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.chat-send-primary:focus,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.chat-send-primary:active,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.btn.primary.chat-send-primary,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.btn.primary.chat-send-primary:hover,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.btn.primary.chat-send-primary:focus,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.btn.primary.chat-send-primary:active{
    appearance:none !important;
    -webkit-appearance:none !important;
    display:inline-flex !important;
    flex:0 0 auto !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    max-width:max-content !important;
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 auto !important;
    padding:0 !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:0 none transparent !important;
    border-radius:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    color:#fff7d7 !important;
    font-size:18px !important;
    font-weight:900 !important;
    line-height:1.35 !important;
    text-align:center !important;
    text-decoration:none !important;
    text-shadow:none !important;
    transform:none !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn::before,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn::after{
    content:none !important;
    display:none !important;
  }
}


/* v287: Arabic mobile micro-nudge for English hero labels.
   Only nudge Select language and Free chat slightly to the left.
   Scope: mobile + Arabic + hero action cards only. Desktop untouched. */
@media (max-width:760px){
  html[lang="ar"] body .page .hero .hero-actions > #openChatBtn span,
  html[lang="ar"] body .page .hero .hero-actions > .mobile-language-picker .mobile-language-visible-label,
  html[lang="ar"] body .page .hero .hero-actions > .mobile-language-picker .mobile-inline-label{
    transform:translateX(-10px) !important;
  }
}


/* v288: center mobile Arabic section pager only.
   Scope: mobile + Arabic + note section pagers. Desktop untouched. */
@media (max-width:760px){
  html[lang="ar"] body .section-pager{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:14px !important;
    width:100% !important;
    max-width:100% !important;
    margin:14px auto 18px !important;
    text-align:center !important;
    direction:rtl !important;
  }

  html[lang="ar"] body .section-pager .pager-btn,
  html[lang="ar"] body .section-pager .pager-info{
    margin:0 !important;
    align-self:center !important;
  }

  html[lang="ar"] body .section-pager .pager-info{
    min-width:64px !important;
    text-align:center !important;
  }
}


/* v289: hard-center Arabic mobile note pagers by centering both parent rows and pager.
   Previous fix targeted only .section-pager; this one also neutralizes parent flex/grid alignment.
   Scope: mobile + Arabic/RTL + board section pagers only. Desktop untouched. */
@media screen and (max-width:760px){
  html[lang="ar"] body .content .section-head,
  html[dir="rtl"] body .content .section-head,
  body.is-rtl .content .section-head,
  html[lang="ar"] body .content .latest-section-head,
  html[dir="rtl"] body .content .latest-section-head,
  body.is-rtl .content .latest-section-head,
  html[lang="ar"] body .content .latest-head-row,
  html[dir="rtl"] body .content .latest-head-row,
  body.is-rtl .content .latest-head-row{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    max-width:100% !important;
    text-align:center !important;
  }

  html[lang="ar"] body .content .section-head > h2,
  html[dir="rtl"] body .content .section-head > h2,
  body.is-rtl .content .section-head > h2,
  html[lang="ar"] body .content .section-head > h4,
  html[dir="rtl"] body .content .section-head > h4,
  body.is-rtl .content .section-head > h4{
    width:100% !important;
    text-align:center !important;
  }

  html[lang="ar"] body .content .section-head .section-pager,
  html[dir="rtl"] body .content .section-head .section-pager,
  body.is-rtl .content .section-head .section-pager,
  html[lang="ar"] body .content .latest-head-row .section-pager,
  html[dir="rtl"] body .content .latest-head-row .section-pager,
  body.is-rtl .content .latest-head-row .section-pager,
  html[lang="ar"] body .content .section-pager,
  html[dir="rtl"] body .content .section-pager,
  body.is-rtl .content .section-pager{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    justify-self:center !important;
    align-self:center !important;
    place-self:center !important;
    width:max-content !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:auto !important;
    margin-right:auto !important;
    margin-inline:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    gap:14px !important;
    text-align:center !important;
    direction:ltr !important;
    transform:none !important;
    float:none !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
  }

  html[lang="ar"] body .content .section-pager .pager-btn,
  html[dir="rtl"] body .content .section-pager .pager-btn,
  body.is-rtl .content .section-pager .pager-btn,
  html[lang="ar"] body .content .section-pager .pager-info,
  html[dir="rtl"] body .content .section-pager .pager-info,
  body.is-rtl .content .section-pager .pager-info{
    flex:0 0 auto !important;
    margin:0 !important;
    text-align:center !important;
  }

  html[lang="ar"] body .content .section-pager .pager-info,
  html[dir="rtl"] body .content .section-pager .pager-info,
  body.is-rtl .content .section-pager .pager-info{
    min-width:64px !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
  }
}


/* v290: Arabic mobile pager wrapper fix.
   Root cause: old v2.5.3 rules put the pager in a two-column grid with
   grid-template-areas:"pager heading" and justify-content:end. Later rules hide
   the heading, so the remaining pager stays off-center. This patch overrides
   that wrapper directly with higher specificity. Desktop untouched. */
@media screen and (max-width:760px){
  html[lang="ar"] body .page #highlights-section > .section-head,
  html[lang="ar"] body .page #latest-section > .section-head.latest-section-head,
  html[lang="ar"] body .page #sensitive-section > .section-head{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    justify-items:center !important;
    grid-template-columns:none !important;
    grid-template-areas:none !important;
    column-gap:0 !important;
    row-gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    text-align:center !important;
    direction:ltr !important;
  }

  html[lang="ar"] body .page #latest-section > .section-head.latest-section-head > .latest-head-row{
    display:none !important;
  }

  html[lang="ar"] body .page #highlights-section > .section-head > .section-pager,
  html[lang="ar"] body .page #latest-section > .section-head.latest-section-head > .section-pager,
  html[lang="ar"] body .page #sensitive-section > .section-head > .section-pager{
    grid-area:auto !important;
    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    justify-self:center !important;
    align-self:center !important;
    place-self:center !important;
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 auto !important;
    margin-inline:auto !important;
    padding:0 !important;
    gap:14px !important;
    text-align:center !important;
    direction:ltr !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    float:none !important;
    transform:none !important;
  }

  html[lang="ar"] body .page #highlights-section > .section-head > .section-pager .pager-btn,
  html[lang="ar"] body .page #latest-section > .section-head.latest-section-head > .section-pager .pager-btn,
  html[lang="ar"] body .page #sensitive-section > .section-head > .section-pager .pager-btn,
  html[lang="ar"] body .page #highlights-section > .section-head > .section-pager .pager-info,
  html[lang="ar"] body .page #latest-section > .section-head.latest-section-head > .section-pager .pager-info,
  html[lang="ar"] body .page #sensitive-section > .section-head > .section-pager .pager-info{
    flex:0 0 auto !important;
    margin:0 !important;
    text-align:center !important;
  }

  html[lang="ar"] body .page #highlights-section > .section-head > .section-pager .pager-info,
  html[lang="ar"] body .page #latest-section > .section-head.latest-section-head > .section-pager .pager-info,
  html[lang="ar"] body .page #sensitive-section > .section-head > .section-pager .pager-info{
    min-width:64px !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
  }
}


/* v291: Arabic mobile pager triangles face outward.
   With pager order left-to-right as: previous | page number | next,
   previous should point left and next should point right. Desktop untouched. */
@media screen and (max-width:760px){
  html[lang="ar"] body .page #highlights-section > .section-head > .section-pager .pager-btn[data-action="prev"]::before,
  html[lang="ar"] body .page #latest-section > .section-head.latest-section-head > .section-pager .pager-btn[data-action="prev"]::before,
  html[lang="ar"] body .page #sensitive-section > .section-head > .section-pager .pager-btn[data-action="prev"]::before{
    content:"◀" !important;
  }

  html[lang="ar"] body .page #highlights-section > .section-head > .section-pager .pager-btn[data-action="next"]::before,
  html[lang="ar"] body .page #latest-section > .section-head.latest-section-head > .section-pager .pager-btn[data-action="next"]::before,
  html[lang="ar"] body .page #sensitive-section > .section-head > .section-pager .pager-btn[data-action="next"]::before{
    content:"▶" !important;
  }
}


/* v292: Arabic mobile chat — apply only the 4 requested changes.
   1) show the people list in the room
   2) make the send button bold, pink, and underlined
   3) place the time immediately after the sender name
   4) move the close button to the far left
   No other desktop or non-Arabic behavior is touched. */
@media (max-width:760px){
  body.is-arabic-mobile-chat-fix #chatModal .chat-sidebar.chat-sidebar-minimal{
    display:block !important;
    order:0 !important;
    flex:0 0 auto !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-people-panel,
  body.is-arabic-mobile-chat-fix #chatModal .chat-sidebar-head.chat-sidebar-head-minimal{
    display:block !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-sidebar-head.chat-sidebar-head-minimal{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-mini-list.chat-mini-list-minimal{
    display:flex !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.chat-send-primary,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.chat-send-primary:hover,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.chat-send-primary:focus,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.chat-send-primary:active,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.btn.primary.chat-send-primary,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.btn.primary.chat-send-primary:hover,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.btn.primary.chat-send-primary:focus,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.btn.primary.chat-send-primary:active{
    color:#f5a3c8 !important;
    font-weight:900 !important;
    text-decoration:underline !important;
    text-underline-offset:4px !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-self,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble:nth-child(5n+1),
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble:nth-child(5n+2),
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble:nth-child(5n+3),
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble:nth-child(5n+4),
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble:nth-child(5n+5){
    display:block !important;
    direction:rtl !important;
    text-align:right !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble-head,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-self .chat-bubble-head{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    margin:0 0 4px !important;
    direction:rtl !important;
    text-align:right !important;
    width:100% !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble-head .chat-name-btn,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-self .chat-bubble-head .chat-name-btn{
    display:inline-block !important;
    width:auto !important;
    max-width:calc(100% - 70px) !important;
    justify-self:auto !important;
    grid-area:auto !important;
    margin:0 !important;
    text-align:right !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble-time,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-self .chat-bubble-time,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble-time[dir="ltr"],
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-self .chat-bubble-time[dir="ltr"]{
    display:inline-block !important;
    width:auto !important;
    max-width:none !important;
    grid-area:auto !important;
    justify-self:auto !important;
    align-self:center !important;
    margin:0 !important;
    padding-top:0 !important;
    text-align:left !important;
    direction:ltr !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble-text,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-self .chat-bubble-text{
    display:block !important;
    grid-area:auto !important;
    width:100% !important;
    text-align:right !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-head{
    justify-content:space-between !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal #closeChatModalBtn,
  body.is-arabic-mobile-chat-fix #chatModal .icon-close{
    order:-1 !important;
    margin-left:0 !important;
    margin-right:auto !important;
    flex:0 0 auto !important;
  }
}


/* v293: Arabic mobile chat follow-up.
   Requested changes only:
   1) sender name + time right-aligned
   2) remove the "Tap a name to open a private chat." line
   3) put the close button at the far left
   4) make the message input wider and rectangular
   5) make "OK Safe Space" larger */
@media (max-width:760px){
  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-head{
    flex-direction:row-reverse !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-titlewrap{
    text-align:right !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-titleline{
    justify-content:flex-end !important;
    text-align:right !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-titleline::after,
  html[lang="ar"] #chatModal .chat-modal-titleline::after,
  html[dir="rtl"] #chatModal .chat-modal-titleline::after,
  body[dir="rtl"] #chatModal .chat-modal-titleline::after,
  body.is-rtl #chatModal .chat-modal-titleline::after{
    content:none !important;
    display:none !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-head .modal-kicker{
    font-size:20px !important;
    line-height:1.1 !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal #closeChatModalBtn,
  body.is-arabic-mobile-chat-fix #chatModal .icon-close{
    order:2 !important;
    margin:0 !important;
    margin-right:auto !important;
    margin-left:0 !important;
    flex:0 0 auto !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble-head,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-self .chat-bubble-head{
    display:flex !important;
    flex-direction:row-reverse !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:8px !important;
    direction:ltr !important;
    text-align:right !important;
    width:100% !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble-head .chat-name-btn,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-self .chat-bubble-head .chat-name-btn{
    order:1 !important;
    display:inline-block !important;
    width:auto !important;
    max-width:calc(100% - 80px) !important;
    text-align:right !important;
    direction:auto !important;
    unicode-bidi:plaintext !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble-time,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-self .chat-bubble-time,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble-time[dir="ltr"],
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-self .chat-bubble-time[dir="ltr"]{
    order:2 !important;
    display:inline-block !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    text-align:left !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal textarea#chatMessageInput.chat-message-input,
  body.is-arabic-mobile-chat-fix #chatModal #chatMessageInput{
    width:96% !important;
    max-width:96% !important;
    min-width:0 !important;
    border-radius:0 !important;
  }
}


/* v294: Arabic mobile chat header structural fix.
   Purpose:
   - move close button to the far left for real
   - keep Arabic room title as primary text on the right
   - keep OK Safe Space as the secondary brand label to its left
   Scope: mobile + Arabic chat modal only. */
@media (max-width:760px){
  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-head{
    display:flex !important;
    direction:ltr !important;
    flex-direction:row !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:14px !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal #closeChatModalBtn,
  body.is-arabic-mobile-chat-fix #chatModal .icon-close{
    order:1 !important;
    margin:0 !important;
    margin-right:12px !important;
    margin-left:0 !important;
    align-self:flex-start !important;
    flex:0 0 auto !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-titlewrap{
    order:2 !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    direction:ltr !important;
    text-align:right !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-titleline{
    display:flex !important;
    direction:ltr !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-items:baseline !important;
    justify-content:flex-end !important;
    gap:12px !important;
    width:100% !important;
    text-align:right !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-head .modal-kicker{
    order:1 !important;
    font-size:22px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal #chatModalTitle{
    order:2 !important;
    margin:0 !important;
    font-size:32px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-titleline::after{
    content:none !important;
    display:none !important;
  }
}


/* v295: Arabic mobile chat header size reduction only.
   Reduce OK Safe Space and the Arabic room title slightly.
   Scope: mobile + Arabic chat modal only. */
@media (max-width:760px){
  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-head .modal-kicker{
    font-size:18px !important;
    line-height:1.08 !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal #chatModalTitle{
    font-size:28px !important;
    line-height:1.08 !important;
  }
}


/* v296: Arabic mobile chat — single-line header + remove horizontal chat separators only. */
@media (max-width:760px){
  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-titlewrap{
    overflow:hidden !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-titleline{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:baseline !important;
    justify-content:flex-end !important;
    gap:8px !important;
    width:100% !important;
    white-space:nowrap !important;
    overflow:hidden !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-head .modal-kicker{
    font-size:16px !important;
    line-height:1.08 !important;
    white-space:nowrap !important;
    flex:0 0 auto !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal #chatModalTitle{
    font-size:22px !important;
    line-height:1.08 !important;
    white-space:nowrap !important;
    flex:0 1 auto !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-message-list{
    border-bottom:none !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-self{
    border-top:none !important;
    border-bottom:none !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble + .chat-bubble{
    border-top:none !important;
    padding-top:0 !important;
  }
}


/* v297: Arabic mobile chat people heading count integration.
   Show the count inline with the heading in western Arabic numerals: (1), (2), (3).
   Hide the old floating count pill to prevent the stray mark on the far left. */
@media (max-width:760px){
  body.is-arabic-mobile-chat-fix #chatModal .chat-sidebar-head.chat-sidebar-head-minimal{
    justify-content:flex-end !important;
    text-align:right !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-sidebar-head.chat-sidebar-head-minimal strong{
    width:100% !important;
    text-align:right !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-count-pill,
  body.is-arabic-mobile-chat-fix #chatModal #chatPresenceCount{
    display:none !important;
  }
}


/* v299: Arabic mobile Free chat tap/click reliability fix.
   Keep the Free chat card above neighboring invisible select overlays and make it receive taps. */
@media (max-width:760px){
  html[lang="ar"] body .page .hero .hero-actions > #openChatBtn{
    position:relative !important;
    z-index:60 !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
    isolation:isolate !important;
  }

  html[lang="ar"] body .page .hero .hero-actions > #openChatBtn span,
  html[lang="ar"] body .page .hero .hero-actions > #openChatBtn::before,
  html[lang="ar"] body .page .hero .hero-actions > #openChatBtn::after{
    pointer-events:none !important;
  }

  html[lang="ar"] body .page .hero .hero-actions > .mobile-collections-picker,
  html[lang="ar"] body .page .hero .hero-actions > .mobile-language-picker{
    z-index:10 !important;
  }

  html[lang="ar"] body .page .hero .hero-actions .mobile-language-select,
  html[lang="ar"] body .page .hero .hero-actions .mobile-collections-select{
    z-index:1 !important;
  }
}


/* v300: Arabic mobile chat helper line under the one-line header.
   Keep OK Safe Space + Arabic room title on the first line, then show the private-chat hint as line two.
   Scope: mobile + Arabic chat modal only. */
@media (max-width:760px){
  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-titlewrap{
    overflow:visible !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-titleline{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-items:baseline !important;
    justify-content:flex-end !important;
    column-gap:8px !important;
    row-gap:3px !important;
    width:100% !important;
    white-space:normal !important;
    overflow:visible !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-head .modal-kicker{
    order:1 !important;
    white-space:nowrap !important;
    flex:0 0 auto !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal #chatModalTitle{
    order:2 !important;
    white-space:nowrap !important;
    flex:0 1 auto !important;
  }

  body.is-arabic-mobile-chat-fix #chatModal .chat-modal-titleline::after{
    content:"اضغط على اسم شخص آخر لفتح دردشة خاصة" !important;
    order:3 !important;
    display:block !important;
    flex:0 0 100% !important;
    margin-top:2px !important;
    color:rgba(255,248,220,.84) !important;
    font-family:var(--font-ui-ar, system-ui, sans-serif) !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
    text-align:right !important;
    direction:rtl !important;
    unicode-bidi:plaintext !important;
    white-space:normal !important;
  }
}


/* v302: add the private chat hint to every non-Arabic mobile chat page.
   The Arabic page keeps its Arabic helper line from v300.
   Scope: mobile + chat modal only. */
@media (max-width:760px){
  html:not([lang="ar"]) #chatModal .chat-modal-titlewrap{
    overflow:visible !important;
  }

  html:not([lang="ar"]) #chatModal .chat-modal-titleline{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-items:baseline !important;
    column-gap:8px !important;
    row-gap:3px !important;
    width:100% !important;
    white-space:normal !important;
    overflow:visible !important;
  }

  html:not([lang="ar"]) #chatModal .chat-modal-titleline::after{
    content:"Tap a name to open a private chat." !important;
    order:3 !important;
    display:block !important;
    flex:0 0 100% !important;
    margin-top:2px !important;
    color:rgba(255,248,220,.84) !important;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    letter-spacing:.01em !important;
    text-align:left !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
    white-space:normal !important;
  }
}

/* v303: localized private-chat hint in the chat header for every language.
   The hint is translated per current html[lang].
   Scope: mobile + chat modal only. */
@media (max-width:760px){
  html[lang="en"] #chatModal .chat-modal-titleline::after{
    content:"Tap a name to open a private chat." !important;
    order:3 !important;
    display:block !important;
    flex:0 0 100% !important;
    margin-top:2px !important;
    color:rgba(255,248,220,.84) !important;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
    text-align:left !important;
    direction:ltr !important;
    unicode-bidi:plaintext !important;
    white-space:normal !important;
  }

  html[lang="ko"] #chatModal .chat-modal-titleline::after{
    content:"이름을 눌러 개인 채팅을 여세요." !important;
    order:3 !important;
    display:block !important;
    flex:0 0 100% !important;
    margin-top:2px !important;
    color:rgba(255,248,220,.84) !important;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
    text-align:left !important;
    direction:ltr !important;
    unicode-bidi:plaintext !important;
    white-space:normal !important;
  }

  html[lang="zh"] #chatModal .chat-modal-titleline::after{
    content:"点击姓名打开私人聊天。" !important;
    order:3 !important;
    display:block !important;
    flex:0 0 100% !important;
    margin-top:2px !important;
    color:rgba(255,248,220,.84) !important;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
    text-align:left !important;
    direction:ltr !important;
    unicode-bidi:plaintext !important;
    white-space:normal !important;
  }

  html[lang="ja"] #chatModal .chat-modal-titleline::after{
    content:"名前をタップしてプライベートチャットを開きます。" !important;
    order:3 !important;
    display:block !important;
    flex:0 0 100% !important;
    margin-top:2px !important;
    color:rgba(255,248,220,.84) !important;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
    text-align:left !important;
    direction:ltr !important;
    unicode-bidi:plaintext !important;
    white-space:normal !important;
  }

  html[lang="id"] #chatModal .chat-modal-titleline::after{
    content:"Ketuk nama untuk membuka chat pribadi." !important;
    order:3 !important;
    display:block !important;
    flex:0 0 100% !important;
    margin-top:2px !important;
    color:rgba(255,248,220,.84) !important;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
    text-align:left !important;
    direction:ltr !important;
    unicode-bidi:plaintext !important;
    white-space:normal !important;
  }

  html[lang="es"] #chatModal .chat-modal-titleline::after{
    content:"Toca un nombre para abrir un chat privado." !important;
    order:3 !important;
    display:block !important;
    flex:0 0 100% !important;
    margin-top:2px !important;
    color:rgba(255,248,220,.84) !important;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
    text-align:left !important;
    direction:ltr !important;
    unicode-bidi:plaintext !important;
    white-space:normal !important;
  }

  html[lang="pt"] #chatModal .chat-modal-titleline::after{
    content:"Toque em um nome para abrir um chat privado." !important;
    order:3 !important;
    display:block !important;
    flex:0 0 100% !important;
    margin-top:2px !important;
    color:rgba(255,248,220,.84) !important;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
    text-align:left !important;
    direction:ltr !important;
    unicode-bidi:plaintext !important;
    white-space:normal !important;
  }

  html[lang="hi"] #chatModal .chat-modal-titleline::after{
    content:"निजी चैट खोलने के लिए किसी नाम पर टैप करें।" !important;
    order:3 !important;
    display:block !important;
    flex:0 0 100% !important;
    margin-top:2px !important;
    color:rgba(255,248,220,.84) !important;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
    text-align:left !important;
    direction:ltr !important;
    unicode-bidi:plaintext !important;
    white-space:normal !important;
  }

  html[lang="th"] #chatModal .chat-modal-titleline::after{
    content:"แตะชื่อเพื่อเปิดแชตส่วนตัว" !important;
    order:3 !important;
    display:block !important;
    flex:0 0 100% !important;
    margin-top:2px !important;
    color:rgba(255,248,220,.84) !important;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
    text-align:left !important;
    direction:ltr !important;
    unicode-bidi:plaintext !important;
    white-space:normal !important;
  }

  html[lang="ar"] #chatModal .chat-modal-titleline::after{
    content:"اضغط على اسم لفتح دردشة خاصة." !important;
    order:3 !important;
    display:block !important;
    flex:0 0 100% !important;
    margin-top:2px !important;
    color:rgba(255,248,220,.84) !important;
    font-family:var(--font-ui-ar, system-ui, sans-serif) !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
    text-align:right !important;
    direction:rtl !important;
    unicode-bidi:plaintext !important;
    white-space:normal !important;
  }

}

/* v304: desktop-only Arabic Free chat English private-chat hint.
   Scope: desktop + Arabic + chat modal only. Mobile and other languages untouched. */
@media (min-width:761px){
  html[lang="ar"] #chatModal .chat-modal-titlewrap{
    overflow:visible !important;
  }

  html[lang="ar"] #chatModal .chat-modal-titleline{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-items:baseline !important;
    justify-content:flex-end !important;
    column-gap:10px !important;
    row-gap:4px !important;
    width:100% !important;
    white-space:normal !important;
    overflow:visible !important;
  }

  html[lang="ar"] #chatModal .chat-modal-titleline::after{
    content:"Tap a name to open a private chat." !important;
    order:3 !important;
    display:block !important;
    flex:0 0 100% !important;
    margin-top:2px !important;
    color:rgba(255,248,220,.84) !important;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    letter-spacing:.01em !important;
    text-align:right !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
    white-space:normal !important;
  }
}


/* v305: Desktop English Free chat intro only.
   Hide the Close text button inside the intro card and restyle Enter public room as a slim capsule.
   Scope: desktop only + English only + Free chat intro card. Mobile untouched. */
@media (min-width:761px){
  html[lang="en"] #chatModal #chatIntroView #cancelChatModalBtn{
    display:none !important;
  }

  html[lang="en"] #chatModal #chatIntroView .chat-intro-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    margin-top:14px !important;
  }

  html[lang="en"] #chatModal #chatIntroView #chatEnterRoomBtn{
    width:auto !important;
    min-width:168px !important;
    max-width:220px !important;
    min-height:38px !important;
    height:38px !important;
    padding:0 24px !important;
    border:0 !important;
    border-radius:999px !important;
    background:linear-gradient(180deg,#ff8f9b 0%,#f46f78 100%) !important;
    color:#fff8ee !important;
    box-shadow:0 8px 0 rgba(91,44,39,.18), 0 16px 26px rgba(91,44,39,.14) !important;
    font-size:15px !important;
    font-weight:900 !important;
    line-height:1 !important;
    letter-spacing:.01em !important;
    text-decoration:none !important;
    white-space:nowrap !important;
  }

  html[lang="en"] #chatModal #chatIntroView #chatEnterRoomBtn:hover,
  html[lang="en"] #chatModal #chatIntroView #chatEnterRoomBtn:focus-visible{
    transform:translateY(-1px) !important;
    box-shadow:0 9px 0 rgba(91,44,39,.18), 0 18px 28px rgba(91,44,39,.16) !important;
  }

  html[lang="en"] #chatModal #chatIntroView #chatEnterRoomBtn:active{
    transform:translateY(2px) !important;
    box-shadow:0 4px 0 rgba(91,44,39,.18), 0 10px 18px rgba(91,44,39,.13) !important;
  }
}


/* v307: Desktop Free chat room header cleanup for non-Arabic languages.
   Remove the small room-type kicker (e.g. "PUBLIC ROOM") and keep only the main room title.
   Scope: desktop only, non-Arabic only, Free chat main room banner only. */
@media (min-width:761px){
  html:not([lang="ar"]) #chatModal .chat-room-banner .chat-room-kicker{
    display:none !important;
  }

  html:not([lang="ar"]) #chatModal .chat-room-banner .chat-room-heading-inline{
    display:flex !important;
    align-items:baseline !important;
    gap:0 !important;
  }

  html:not([lang="ar"]) #chatModal .chat-room-banner .chat-room-heading-inline .chat-room-title{
    margin:0 !important;
  }
}


/* v308: Extend desktop Free chat room-header cleanup to Arabic too.
   Remove the small room-type kicker in Arabic as well, keeping only the main room title.
   Scope: desktop only, Arabic Free chat banner only. */
@media (min-width:761px){
  html[lang="ar"] #chatModal .chat-room-banner .chat-room-kicker,
  html[dir="rtl"] #chatModal .chat-room-banner .chat-room-kicker,
  body[dir="rtl"] #chatModal .chat-room-banner .chat-room-kicker,
  body.is-rtl #chatModal .chat-room-banner .chat-room-kicker{
    display:none !important;
  }

  html[lang="ar"] #chatModal .chat-room-banner .chat-room-heading-inline,
  html[dir="rtl"] #chatModal .chat-room-banner .chat-room-heading-inline,
  body[dir="rtl"] #chatModal .chat-room-banner .chat-room-heading-inline,
  body.is-rtl #chatModal .chat-room-banner .chat-room-heading-inline{
    display:flex !important;
    align-items:baseline !important;
    gap:0 !important;
  }

  html[lang="ar"] #chatModal .chat-room-banner .chat-room-heading-inline .chat-room-title,
  html[dir="rtl"] #chatModal .chat-room-banner .chat-room-heading-inline .chat-room-title,
  body[dir="rtl"] #chatModal .chat-room-banner .chat-room-heading-inline .chat-room-title,
  body.is-rtl #chatModal .chat-room-banner .chat-room-heading-inline .chat-room-title{
    margin:0 !important;
  }
}


/* v309: Desktop Free chat intro actions for all non-Arabic languages.
   Hide the intro Close button and make Enter public room a slim capsule.
   Scope: desktop only, non-Arabic only, Free chat intro card only. Mobile and Arabic untouched. */
@media (min-width:761px){
  html:not([lang="ar"]) #chatModal #chatIntroView #cancelChatModalBtn{
    display:none !important;
  }

  html:not([lang="ar"]) #chatModal #chatIntroView .chat-intro-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    margin-top:14px !important;
  }

  html:not([lang="ar"]) #chatModal #chatIntroView #chatEnterRoomBtn,
  html:not([lang="ar"]) #chatModal #chatIntroView #chatEnterRoomBtn.btn,
  html:not([lang="ar"]) #chatModal #chatIntroView #chatEnterRoomBtn.primary{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    min-width:148px !important;
    max-width:max-content !important;
    min-height:34px !important;
    height:34px !important;
    padding:0 22px !important;
    border-radius:999px !important;
    border:1px solid rgba(255,248,220,.42) !important;
    background:linear-gradient(180deg,#ff8f8a,#ff6f68) !important;
    box-shadow:0 6px 16px rgba(255,111,104,.22) !important;
    color:#fff8f2 !important;
    font-size:14px !important;
    font-weight:900 !important;
    line-height:1 !important;
    text-decoration:none !important;
    text-shadow:0 1px 0 rgba(0,0,0,.14) !important;
    transform:none !important;
  }
}


/* v312: Arabic desktop Free chat helper hint should be translated to Arabic.
   Fix old English override from v304. Scope: desktop Arabic chat modal only. */
@media (min-width:761px){
  html[lang="ar"] #chatModal .chat-modal-titleline::after,
  html[dir="rtl"] #chatModal .chat-modal-titleline::after,
  body[dir="rtl"] #chatModal .chat-modal-titleline::after,
  body.is-rtl #chatModal .chat-modal-titleline::after{
    content:"اضغط على اسم لفتح دردشة خاصة." !important;
    font-family:var(--font-ui-ar, system-ui, sans-serif) !important;
    text-align:right !important;
    direction:rtl !important;
    unicode-bidi:plaintext !important;
    letter-spacing:0 !important;
  }
}


/* v313: Arabic desktop Free chat Leave button clickability fix.
   Make the Leave chat / مغادرة الدردشة button receive pointer events above composer overlays.
   Scope: desktop + Arabic chat modal only. Mobile and other languages untouched. */
@media (min-width:761px){
  html[lang="ar"] #chatModal .chat-composer,
  html[lang="ar"] #chatModal .chat-composer-form,
  html[lang="ar"] #chatModal .chat-composer-footer,
  html[lang="ar"] #chatModal .chat-modal-actions,
  html[dir="rtl"] #chatModal .chat-composer,
  html[dir="rtl"] #chatModal .chat-composer-form,
  html[dir="rtl"] #chatModal .chat-composer-footer,
  html[dir="rtl"] #chatModal .chat-modal-actions,
  body[dir="rtl"] #chatModal .chat-composer,
  body[dir="rtl"] #chatModal .chat-composer-form,
  body[dir="rtl"] #chatModal .chat-composer-footer,
  body[dir="rtl"] #chatModal .chat-modal-actions,
  body.is-rtl #chatModal .chat-composer,
  body.is-rtl #chatModal .chat-composer-form,
  body.is-rtl #chatModal .chat-composer-footer,
  body.is-rtl #chatModal .chat-modal-actions{
    position:relative !important;
    z-index:30 !important;
    pointer-events:auto !important;
  }

  html[lang="ar"] #chatModal #chatBackToStartBtn,
  html[dir="rtl"] #chatModal #chatBackToStartBtn,
  body[dir="rtl"] #chatModal #chatBackToStartBtn,
  body.is-rtl #chatModal #chatBackToStartBtn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    z-index:40 !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
    cursor:pointer !important;
  }

  html[lang="ar"] #chatModal .chat-composer::before,
  html[lang="ar"] #chatModal .chat-composer::after,
  html[dir="rtl"] #chatModal .chat-composer::before,
  html[dir="rtl"] #chatModal .chat-composer::after,
  body[dir="rtl"] #chatModal .chat-composer::before,
  body[dir="rtl"] #chatModal .chat-composer::after,
  body.is-rtl #chatModal .chat-composer::before,
  body.is-rtl #chatModal .chat-composer::after{
    pointer-events:none !important;
  }
}


/* v314: Arabic desktop Leave chat hard click fix.
   Very narrow scope: desktop + Arabic + #chatBackToStartBtn only.
   Raises the real button above decorative/composer layers and makes nearby pseudo layers non-interactive. */
@media (min-width:761px){
  html[lang="ar"] #chatModal .chat-composer,
  html[lang="ar"] #chatModal .chat-composer-form,
  html[lang="ar"] #chatModal .chat-composer-footer,
  html[lang="ar"] #chatModal .chat-modal-actions{
    position:relative !important;
    isolation:isolate !important;
    pointer-events:auto !important;
  }

  html[lang="ar"] #chatModal .chat-composer::before,
  html[lang="ar"] #chatModal .chat-composer::after,
  html[lang="ar"] #chatModal .chat-composer-form::before,
  html[lang="ar"] #chatModal .chat-composer-form::after,
  html[lang="ar"] #chatModal .chat-composer-footer::before,
  html[lang="ar"] #chatModal .chat-composer-footer::after,
  html[lang="ar"] #chatModal .chat-modal-actions::before,
  html[lang="ar"] #chatModal .chat-modal-actions::after{
    pointer-events:none !important;
  }

  html[lang="ar"] #chatModal button#chatBackToStartBtn,
  html[lang="ar"] #chatModal .chat-modal-actions button#chatBackToStartBtn,
  html[lang="ar"] #chatModal .chat-modal-actions .secondary-btn#chatBackToStartBtn{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    z-index:9999 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
    touch-action:manipulation !important;
    user-select:none !important;
  }
}


/* v315: Arabic desktop Leave chat final reliability patch.
   Give the real Leave button a stable hit-box; JS also detects clicks by its rectangle.
   Scope: desktop + Arabic + #chatBackToStartBtn only. */
@media (min-width:761px){
  html[lang="ar"] #chatModal .chat-modal-actions{
    position:relative !important;
    isolation:isolate !important;
    overflow:visible !important;
  }

  html[lang="ar"] #chatModal button#chatBackToStartBtn{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    z-index:2147483647 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
    transform:none !important;
    min-width:96px !important;
    min-height:44px !important;
  }
}


/* v323: Free chat mobile Leave button + action layout.
   Scope: mobile chat modal only. Overrides older mobile/Arabic patches that hid Leave chat. */
@media (max-width:760px){
  #chatModal .chat-composer-footer{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
  }

  #chatModal .chat-modal-actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
    justify-content:stretch !important;
    align-items:center !important;
    position:relative !important;
    z-index:40 !important;
    pointer-events:auto !important;
  }

  #chatModal #chatBackToStartBtn,
  #chatModal .chat-modal-actions #chatBackToStartBtn,
  html[lang="ar"] #chatModal #chatBackToStartBtn,
  html[dir="rtl"] #chatModal #chatBackToStartBtn,
  body[dir="rtl"] #chatModal #chatBackToStartBtn,
  body.is-rtl #chatModal #chatBackToStartBtn,
  body.is-arabic-mobile-chat-fix #chatModal button#chatBackToStartBtn{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
    margin:0 !important;
    padding:0 12px !important;
    position:relative !important;
    z-index:45 !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
    cursor:pointer !important;
    white-space:normal !important;
  }

  #chatModal #sendChatMessageBtn{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    min-height:44px !important;
    position:relative !important;
    z-index:45 !important;
    pointer-events:auto !important;
  }

  html[lang="ar"] #chatModal .chat-modal-actions,
  html[dir="rtl"] #chatModal .chat-modal-actions,
  body[dir="rtl"] #chatModal .chat-modal-actions,
  body.is-rtl #chatModal .chat-modal-actions{
    direction:rtl !important;
  }
}


/* v326: Free chat people list visibility on phone/tablet.
   Scope: chat modal only. Prevents Android/iPad people list from being clipped to one item. */
@media (max-width:940px){
  #chatModal #chatPeoplePanel,
  #chatModal .chat-sidebar{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  #chatModal #chatUsersList{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    min-height:0 !important;
    max-height:min(34vh, 260px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    padding-right:2px !important;
  }

  #chatModal #chatUsersList .chat-list-item{
    flex:0 0 auto !important;
    width:100% !important;
  }
}

@media (max-width:760px){
  #chatModal #chatUsersList{
    max-height:min(30vh, 220px) !important;
  }
}


/* v331: Phone Free chat must show the conversation/message area.
   Scope: mobile/tablet chat modal only. Keeps desktop unchanged. */
@media (max-width:760px){
  #chatModal .chat-card{
    height:94vh !important;
    max-height:94vh !important;
  }

  #chatModal .chat-modal-body{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  #chatModal .chat-shell{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    min-height:0 !important;
    height:100% !important;
    overflow:hidden !important;
  }

  /* Put people list first, but keep it compact so it does not hide messages. */
  #chatModal #chatPeoplePanel,
  #chatModal .chat-sidebar{
    order:1 !important;
    flex:0 0 auto !important;
    max-height:24vh !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  #chatModal #chatUsersList{
    max-height:20vh !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  /* Main chat area must always reserve visible space for messages. */
  #chatModal .chat-main{
    order:2 !important;
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow:hidden !important;
    gap:8px !important;
  }

  #chatModal .chat-room-banner{
    flex:0 0 auto !important;
    padding:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    overflow:hidden !important;
    border:0 !important;
    margin:0 !important;
  }

  #chatModal .chat-message-list,
  #chatModal #chatMessages{
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;
    min-height:150px !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    padding:8px 4px 10px 0 !important;
    gap:8px !important;
  }

  #chatModal .chat-composer{
    flex:0 0 auto !important;
    padding:10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    margin-top:0 !important;
  }

  #chatModal .chat-message-input{
    min-height:92px !important;
    height:92px !important;
  }

  #chatModal .chat-composer-helper-row{
    display:none !important;
  }

  #chatModal .chat-modal-actions{
    margin-top:8px !important;
  }
}


/* ============================================================


/* ============================================================
   CHAT FIX: LINE-style bubbles on chalkboard — preserves original green board
   ============================================================ */

/* ── Modal layout: flex column so message list can grow ── */
#chatModal .chat-card {
  display: flex !important;
  flex-direction: column !important;
  height: min(92vh, 960px) !important;
  max-height: min(92vh, 960px) !important;
}
#chatModal .chat-modal-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* ── Shell: sidebar | main ── */
#chatModal .chat-shell {
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: 240px minmax(0,1fr) !important;
  gap: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* ── Sidebar ── */
#chatModal .chat-sidebar {
  border-right: 1px solid rgba(255,248,220,.22) !important;
  padding: 14px 18px 14px 10px !important;
  overflow-y: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  transform: none !important;
}
#chatModal .chat-sidebar-block,
#chatModal .chat-sidebar-people-only {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transform: none !important;
}
#chatModal .chat-sidebar-block::before,
#chatModal .chat-sidebar-block::after,
#chatModal .chat-sidebar-people-only::before,
#chatModal .chat-sidebar-people-only::after {
  content: none !important;
  display: none !important;
}
#chatModal .chat-sidebar-head {
  margin: 0 0 12px !important;
  padding: 0 0 10px !important;
  border-bottom: 1px dashed rgba(255,248,220,.28) !important;
  background: transparent !important;
}
#chatModal .chat-sidebar-head strong,
#chatModal .chat-count-pill {
  color: #fff8dc !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}
#chatModal .chat-count-pill {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  min-width: auto !important;
  box-shadow: none !important;
}
#chatModal .chat-mini-list {
  gap: 0 !important;
}
#chatModal .chat-list-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,248,220,.10) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 8px 0 !important;
  margin: 0 !important;
}
#chatModal .chat-list-item:last-child {
  border-bottom: none !important;
}
#chatModal .chat-list-item strong,
#chatModal .chat-list-item span,
#chatModal .chat-name-btn,
#chatModal .chat-empty-copy,
#chatModal .chat-room-copy,
#chatModal .composer-helper,
#chatModal .char-counter {
  color: rgba(255,248,220,.85) !important;
  text-shadow: none !important;
}
#chatModal .chat-list-item strong {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #fff8dc !important;
}
#chatModal .chat-user-self-tag {
  background: transparent !important;
  border: 1px solid rgba(255,190,220,.40) !important;
  color: #ffd7eb !important;
}

/* ── Main area ── */
#chatModal .chat-main {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 14px 18px 14px 20px !important;
  gap: 0 !important;
  background: transparent !important;
}

/* ── Room banner ── */
#chatModal .chat-room-banner {
  flex: 0 0 auto !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px dashed rgba(255,248,220,.28) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 0 0 12px !important;
  margin: 0 0 12px !important;
  max-height: none !important;
  overflow: visible !important;
}
#chatModal .chat-room-banner::before,
#chatModal .chat-room-banner::after {
  content: none !important;
  display: none !important;
}
#chatModal .chat-room-title {
  color: #fff8dc !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  margin: 0 !important;
  text-shadow: none !important;
}
#chatModal .chat-room-kicker {
  color: rgba(255,248,220,.65) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  margin-right: 8px !important;
}
#chatModal .chat-room-copy {
  color: rgba(255,248,220,.72) !important;
  font-size: 12px !important;
  margin-top: 2px !important;
}

/* ── Message list: lined notebook look on green board ── */
#chatModal .chat-message-list,
#chatModal #chatMessages {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  min-height: 0 !important;
  max-height: none !important;
  gap: 10px !important;
  padding: 10px 4px 14px 4px !important;
  /* horizontal chalk lines like a notebook */
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 29px,
    rgba(255,248,220,.08) 30px
  ) !important;
  border-bottom: 1px dashed rgba(255,248,220,.22) !important;
  margin-bottom: 12px !important;
  position: relative !important;
}
#chatModal .chat-message-list::before,
#chatModal #chatMessages::before {
  content: none !important;
  display: none !important;
}

/* ── Composer ── */
#chatModal .chat-composer {
  flex: 0 0 auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#chatModal .chat-composer::before,
#chatModal .chat-composer::after {
  content: none !important;
  display: none !important;
}
#chatModal .chat-composer-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#chatModal .chat-message-input {
  min-height: 52px !important;
  height: 52px !important;
  background: rgba(255,255,255,.95) !important;
  border: 1px solid rgba(255,226,120,.35) !important;
  border-radius: 14px !important;
  color: #211c18 !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
#chatModal .chat-message-input::placeholder {
  color: rgba(33,28,24,.45) !important;
}
#chatModal .chat-composer-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
#chatModal .chat-composer-helper-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
  order: 1 !important;
}
#chatModal .chat-modal-actions {
  order: 2 !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  position: static !important;
  bottom: auto !important;
  z-index: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
#chatModal .chat-send-primary {
  background: #ff7168 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 6px 16px rgba(255,113,104,.28) !important;
  min-width: 120px !important;
}
#chatModal .chat-send-primary:hover:not(:disabled) {
  background: #e55e56 !important;
}
#chatModal .chat-send-primary:disabled {
  opacity: .55 !important;
}
#chatModal .secondary-btn[id="chatBackToStartBtn"],
#chatModal .chat-modal-actions .secondary-btn {
  background: rgba(255,248,220,.12) !important;
  color: #fff8dc !important;
  border: 1px solid rgba(255,248,220,.28) !important;
  border-radius: 14px !important;
}

/* ── BUBBLES: LINE-style on chalkboard ── */
/* Reset all previous versions */
#chatModal .chat-bubble,
#chatModal .chat-bubble.is-self {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 100% !important;
  align-self: flex-start !important;
  /* no card styling */
  padding: 0 !important;
  margin: 2px 0 !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
#chatModal .chat-bubble.is-self {
  flex-direction: row-reverse !important;
  align-self: flex-end !important;
}
#chatModal .chat-bubble::before,
#chatModal .chat-bubble::after,
#chatModal .chat-bubble.is-self::before,
#chatModal .chat-bubble.is-self::after {
  content: none !important;
  display: none !important;
}

/* Avatar: small chalk-coloured circle */
#chatModal .chat-bubble-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(255,248,220,.18) !important;
  border: 1px solid rgba(255,248,220,.30) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  align-self: flex-end !important;
}
#chatModal .chat-bubble.is-self .chat-bubble-avatar {
  display: none !important;
}

/* Content column */
#chatModal .chat-bubble-content {
  display: flex !important;
  flex-direction: column !important;
  max-width: min(68%, 440px) !important;
  gap: 3px !important;
}
#chatModal .chat-bubble.is-self .chat-bubble-content {
  align-items: flex-end !important;
}

/* Name row */
#chatModal .chat-bubble-head {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 3px !important;
  padding: 0 !important;
  background: none !important;
  color: rgba(255,248,220,.72) !important;
  text-shadow: none !important;
}
#chatModal .chat-bubble.is-self .chat-bubble-head {
  display: none !important;
}
#chatModal .chat-name-btn {
  color: #ffe87a !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.25) !important;
}

/* Timestamp beside bubble */
#chatModal .chat-bubble-time,
#chatModal .chat-bubble.is-self .chat-bubble-time {
  color: rgba(255,248,220,.48) !important;
  font-size: 10px !important;
  white-space: nowrap !important;
  align-self: flex-end !important;
  padding-bottom: 4px !important;
  margin: 0 !important;
  text-shadow: none !important;
}

/* The bubble box itself */
#chatModal .chat-bubble-text {
  display: inline-block !important;
  max-width: 100% !important;
  padding: 8px 13px !important;
  margin: 0 !important;
  /* others: chalk-white bubble */
  background: rgba(255,255,255,.92) !important;
  background-color: rgba(255,255,255,.92) !important;
  border: none !important;
  border-radius: 16px 16px 16px 4px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.22) !important;
  color: #1e1a14 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  text-align: left !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}
#chatModal .chat-bubble.is-self .chat-bubble-text {
  /* self: warm cream/yellow — stands out on green board */
  background: #fff3c0 !important;
  background-color: #fff3c0 !important;
  border-radius: 16px 16px 4px 16px !important;
  color: #1e1a14 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.20) !important;
}

/* ── Mobile ── */
@media (max-width: 760px) {
  #chatModal .chat-card {
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border-width: 8px !important;
  }
  #chatModal .chat-shell {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  #chatModal .chat-sidebar {
    flex: 0 0 auto !important;
    border-right: none !important;
    border-bottom: 1px dashed rgba(255,248,220,.22) !important;
    padding: 8px 12px !important;
    max-height: 26vh !important;
    overflow-y: auto !important;
  }
  #chatModal .chat-main {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 10px 10px 10px 12px !important;
    overflow: hidden !important;
  }
  #chatModal .chat-bubble-content {
    max-width: min(78vw, 320px) !important;
  }
  #chatModal .chat-composer-helper-row {
    display: none !important;
  }
  #chatModal .chat-modal-actions {
    width: 100% !important;
    justify-content: flex-end !important;
  }
}

/* ── Empty state ── */
#chatModal .chat-empty-copy {
  margin: auto !important;
  text-align: center !important;
  color: rgba(255,248,220,.55) !important;
  font-size: 13px !important;
  padding: 20px !important;
}

/* ── Scrollbar: subtle on dark background ── */
#chatModal .chat-message-list::-webkit-scrollbar,
#chatModal #chatMessages::-webkit-scrollbar {
  width: 4px !important;
}
#chatModal .chat-message-list::-webkit-scrollbar-thumb,
#chatModal #chatMessages::-webkit-scrollbar-thumb {
  background: rgba(255,248,220,.22) !important;
  border-radius: 4px !important;
}


/* ============================================================
   CHAT FIX v2: bubble text nowrap fix + minimize button + leave room
   ============================================================ */

/* ── Fix bubble text rendering as vertical letters ──
   The root cause: composer-textarea gets min-height from earlier rules
   and the bubble-text inherits a block width of 0.
   Force every bubble-text to have auto width and wrap normally. */
#chatModal .chat-bubble-text {
  display: inline-block !important;
  width: auto !important;
  min-width: 40px !important;
  max-width: min(70vw, 420px) !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  padding: 9px 14px !important;
  line-height: 1.55 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  /* others: white bubble */
  background: rgba(255,255,255,.94) !important;
  color: #1e1a14 !important;
  border: none !important;
  border-radius: 16px 16px 16px 4px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.20) !important;
  text-shadow: none !important;
  text-align: left !important;
  margin: 0 !important;
}
#chatModal .chat-bubble.is-self .chat-bubble-text {
  /* self: warm yellow-cream bubble */
  background: #fff2b0 !important;
  color: #1e1a14 !important;
  border-radius: 16px 16px 4px 16px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
}

/* Ensure bubble-content column doesn't collapse */
#chatModal .chat-bubble-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  max-width: min(70vw, 440px) !important;
  min-width: 0 !important;
}
#chatModal .chat-bubble.is-self .chat-bubble-content {
  align-items: flex-end !important;
}

/* ── Minimize button in modal header ── */
.chat-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-minimize-btn {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 2px solid rgba(255,248,220,.40);
  background: rgba(255,248,220,.14);
  color: #fff8dc;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.chat-minimize-btn:hover {
  background: rgba(255,248,220,.24);
}

/* ── Minimized state: show only the header bar ── */
#chatModal .chat-card.chat-minimized {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  /* stick to bottom-right corner */
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  width: min(380px, calc(100vw - 32px)) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.40) !important;
}
#chatModal.has-minimized-card {
  /* let pointer events through the backdrop when minimized */
  pointer-events: none;
  background: transparent !important;
  backdrop-filter: none !important;
}
#chatModal .chat-card.chat-minimized .chat-modal-body {
  display: none !important;
}
#chatModal .chat-card.chat-minimized .chat-modal-head {
  border-bottom: none !important;
  border-radius: 14px !important;
  cursor: pointer;
}
/* Make minimized card itself clickable (backdrop is pass-through) */
#chatModal .chat-card.chat-minimized {
  pointer-events: all !important;
}

/* ── Leave room: button label update (i18n kept, just visual) ── */
#chatBackToStartBtn::after {
  /* visually show it won't close the popup */
  content: '';
}


/* ============================================================
   CHAT FIX v4: no-bubble text, wider input, mobile polish
   ============================================================ */

/* ── ข้อ 1: ข้อความ chat ไม่มีพื้นหลัง ไม่มี bubble ──
   ข้อความแสดงเป็น plain text บนกระดานเขียว
   ฝั่งซ้าย = คนอื่น (chalk สีขาว)  ฝั่งขวา = ตัวเอง (chalk สีเหลือง) */
#chatModal .chat-bubble-text,
#chatModal .chat-bubble.is-self .chat-bubble-text {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.65 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.18) !important;
}
/* คนอื่น: chalk white */
#chatModal .chat-bubble-text {
  color: #f5f0e0 !important;
}
/* ตัวเอง: chalk yellow */
#chatModal .chat-bubble.is-self .chat-bubble-text {
  color: #ffe87a !important;
}

/* Bubble wrapper: ไม่มี box ล้อมรอบ แค่จัดวาง */
#chatModal .chat-bubble,
#chatModal .chat-bubble.is-self {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 0 10px !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  align-self: flex-start !important;
  max-width: 100% !important;
  width: 100% !important;
}
#chatModal .chat-bubble.is-self {
  flex-direction: row-reverse !important;
  align-self: flex-end !important;
}
#chatModal .chat-bubble::before,
#chatModal .chat-bubble::after,
#chatModal .chat-bubble.is-self::before,
#chatModal .chat-bubble.is-self::after {
  content: none !important;
  display: none !important;
}

/* Avatar: เล็กลงไม่โดดเด่น */
#chatModal .chat-bubble-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255,248,220,.14) !important;
  border: 1px solid rgba(255,248,220,.22) !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}
#chatModal .chat-bubble.is-self .chat-bubble-avatar {
  display: none !important;
}

/* Content column */
#chatModal .chat-bubble-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  max-width: calc(100% - 40px) !important;
  min-width: 0 !important;
}
#chatModal .chat-bubble.is-self .chat-bubble-content {
  align-items: flex-end !important;
  max-width: 75% !important;
}

/* ชื่อผู้ส่ง */
#chatModal .chat-bubble-head {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 1px !important;
  padding: 0 !important;
  background: none !important;
}
#chatModal .chat-bubble.is-self .chat-bubble-head {
  display: none !important;
}
#chatModal .chat-name-btn {
  color: #ffe87a !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  text-shadow: none !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  opacity: .85 !important;
}

/* Timestamp */
#chatModal .chat-bubble-time,
#chatModal .chat-bubble.is-self .chat-bubble-time {
  color: rgba(255,248,220,.42) !important;
  font-size: 10px !important;
  white-space: nowrap !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  text-shadow: none !important;
  align-self: flex-start !important;
}
#chatModal .chat-bubble.is-self .chat-bubble-time {
  align-self: flex-end !important;
}

/* ── ข้อ 4: ช่องพิมพ์ยาวเต็มแนวนอน ──*/
#chatModal .chat-composer {
  flex: 0 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}
#chatModal .chat-composer-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#chatModal .chat-message-input {
  width: 100% !important;
  min-height: 48px !important;
  height: 48px !important;
  max-height: 140px !important;
  resize: none !important;
  box-sizing: border-box !important;
  padding: 12px 16px !important;
  background: rgba(255,255,255,.95) !important;
  border: 1px solid rgba(255,226,120,.30) !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  color: #1e1a14 !important;
  line-height: 1.45 !important;
  box-shadow: none !important;
}
#chatModal .chat-message-input::placeholder {
  color: rgba(33,28,24,.40) !important;
}

/* Footer row: helper + counter + buttons ทั้งหมดใน 1 แถว */
#chatModal .chat-composer-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}
#chatModal .chat-composer-helper-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  order: 1 !important;
  font-size: 11px !important;
  color: rgba(255,248,220,.52) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
#chatModal .composer-helper {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: rgba(255,248,220,.52) !important;
  font-size: 11px !important;
}
#chatModal .char-counter {
  color: rgba(255,248,220,.45) !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
#chatModal .chat-modal-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  order: 2 !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* ── ข้อ 2: ซ่อน self-tag ทาง CSS ด้วย (double safety) ── */
#chatModal .chat-user-self-tag {
  display: none !important;
}
/* ซ่อน span ที่ 2 ของ isSelf (You are here now) */
#chatModal #chatUsersList .chat-list-item button span:last-child:only-child {
  /* ไม่ซ่อน — เฉพาะ isSelf ที่ถูก render ไปแล้ว ใช้ CSS attribute แทน */
}
#chatModal .chat-list-item[data-is-self="true"] > button > div > span {
  display: none !important;
}

/* ── ข้อ 7: Mobile / Tablet ──*/
@media (max-width: 760px) {
  #chatModal .chat-card {
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border-width: 6px !important;
  }
  #chatModal .chat-shell {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    overflow: hidden !important;
  }
  #chatModal .chat-sidebar {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-height: 22vh !important;
    border-right: none !important;
    border-bottom: 1px dashed rgba(255,248,220,.22) !important;
    padding: 8px 12px !important;
    overflow-y: auto !important;
  }
  #chatModal .chat-main {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
    overflow: hidden !important;
  }
  #chatModal .chat-message-input {
    min-height: 44px !important;
    height: 44px !important;
    font-size: 16px !important; /* iOS zoom prevention */
  }
  #chatModal .chat-composer-helper-row {
    display: none !important; /* ซ่อน hint บน mobile ประหยัดพื้นที่ */
  }
  #chatModal .chat-modal-actions {
    width: 100% !important;
    justify-content: flex-end !important;
  }
  #chatModal .chat-send-primary {
    flex: 1 !important;
    max-width: 160px !important;
  }
  #chatModal .chat-bubble.is-self .chat-bubble-content {
    max-width: 85% !important;
  }
  #chatModal .chat-bubble-content {
    max-width: calc(100% - 38px) !important;
  }
}

@media (min-width: 761px) and (max-width: 1024px) {
  /* Tablet */
  #chatModal .chat-shell {
    grid-template-columns: 200px minmax(0,1fr) !important;
  }
  #chatModal .chat-bubble.is-self .chat-bubble-content {
    max-width: 70% !important;
  }
}

/* ── Message list lined background ── */
#chatModal .chat-message-list,
#chatModal #chatMessages {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  min-height: 0 !important;
  max-height: none !important;
  gap: 0 !important;
  padding: 10px 6px 14px 6px !important;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 31px,
    rgba(255,248,220,.07) 32px
  ) !important;
  border-bottom: 1px dashed rgba(255,248,220,.20) !important;
  margin-bottom: 12px !important;
}
#chatModal .chat-message-list::before,
#chatModal #chatMessages::before {
  content: none !important;
  display: none !important;
}


/* ============================================================
   CHAT FIX v5: capsule bubble — transparent bg, thin border
   แก้ข้อความแนวตั้ง + กรอบแคปซูลโปร่งใส
   ============================================================ */

/* ── กรอบแคปซูลโปร่งใส ── */
#chatModal .chat-bubble-text,
#chatModal .chat-bubble.is-self .chat-bubble-text {
  /* layout — ต้องเป็น block ใน flex column เพื่อไม่ให้ text แนวตั้ง */
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  /* capsule shape */
  padding: 7px 16px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  /* โปร่งใส เห็นกระดานข้างหลัง */
  background: rgba(255,255,255,0.07) !important;
  background-color: rgba(255,255,255,0.07) !important;
  /* ขอบบางๆ */
  border: 1px solid rgba(255,248,220,0.30) !important;
  box-shadow: none !important;
  /* text */
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  color: #f5f0e0 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.20) !important;
  text-align: left !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* ตัวเอง: ขอบและ tint ต่างออกไปเล็กน้อย */
#chatModal .chat-bubble.is-self .chat-bubble-text {
  background: rgba(255,232,122,0.13) !important;
  background-color: rgba(255,232,122,0.13) !important;
  border: 1px solid rgba(255,232,122,0.38) !important;
  color: #ffe87a !important;
  text-align: left !important;
}

/* ── bubble wrapper — flex row ── */
#chatModal .chat-bubble,
#chatModal .chat-bubble.is-self {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  align-self: flex-start !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
#chatModal .chat-bubble.is-self {
  flex-direction: row-reverse !important;
  align-self: flex-end !important;
}
#chatModal .chat-bubble::before,
#chatModal .chat-bubble::after,
#chatModal .chat-bubble.is-self::before,
#chatModal .chat-bubble.is-self::after {
  content: none !important;
  display: none !important;
}

/* ── content column ── */
#chatModal .chat-bubble-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  /* สำคัญ: ต้องมี max-width ไม่งั้น text collapse เป็นแนวตั้ง */
  max-width: min(72%, 480px) !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
}
#chatModal .chat-bubble.is-self .chat-bubble-content {
  align-items: flex-end !important;
  max-width: min(72%, 480px) !important;
}

/* ── avatar ── */
#chatModal .chat-bubble-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255,248,220,.12) !important;
  border: 1px solid rgba(255,248,220,.20) !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  margin-top: 4px !important;
}
#chatModal .chat-bubble.is-self .chat-bubble-avatar {
  display: none !important;
}

/* ── ชื่อผู้ส่ง ── */
#chatModal .chat-bubble-head {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 0 1px 4px !important;
  padding: 0 !important;
  background: none !important;
}
#chatModal .chat-bubble.is-self .chat-bubble-head {
  display: none !important;
}
#chatModal .chat-name-btn {
  color: rgba(255,232,122,.75) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  text-shadow: none !important;
  cursor: pointer !important;
}

/* ── timestamp ── */
#chatModal .chat-bubble-time,
#chatModal .chat-bubble.is-self .chat-bubble-time {
  color: rgba(255,248,220,.38) !important;
  font-size: 10px !important;
  white-space: nowrap !important;
  margin: 1px 0 0 4px !important;
  padding: 0 !important;
  text-shadow: none !important;
}
#chatModal .chat-bubble.is-self .chat-bubble-time {
  margin: 1px 4px 0 0 !important;
}

/* ── Mobile ── */
@media (max-width: 760px) {
  #chatModal .chat-bubble-content,
  #chatModal .chat-bubble.is-self .chat-bubble-content {
    max-width: min(80vw, 300px) !important;
  }
}


/* ============================================================
   CHAT FIX v8: square message boxes + horizontal text + larger composer
   ============================================================ */
#chatModal .chat-bubble-content,
#chatModal .chat-bubble.is-self .chat-bubble-content {
  flex: 0 1 min(78%, 760px) !important;
  width: auto !important;
  max-width: min(78%, 760px) !important;
  min-width: 0 !important;
}

#chatModal .chat-bubble-text,
#chatModal .chat-bubble.is-self .chat-bubble-text {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 0 !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  line-height: 1.6 !important;
}

#chatModal .chat-composer {
  padding-top: 14px !important;
}

#chatModal .chat-composer-form {
  gap: 12px !important;
}

#chatModal .chat-message-input {
  width: 100% !important;
  min-height: 104px !important;
  height: 104px !important;
  padding: 16px 18px !important;
  line-height: 1.55 !important;
}

@media (min-width: 761px) and (max-width: 1024px) {
  #chatModal .chat-bubble-content,
  #chatModal .chat-bubble.is-self .chat-bubble-content {
    max-width: min(82%, 680px) !important;
  }
  #chatModal .chat-message-input {
    min-height: 94px !important;
    height: 94px !important;
  }
}

@media (max-width: 760px) {
  #chatModal .chat-bubble-content,
  #chatModal .chat-bubble.is-self .chat-bubble-content {
    flex-basis: auto !important;
    max-width: calc(100% - 40px) !important;
  }
  #chatModal .chat-message-input {
    min-height: 78px !important;
    height: 78px !important;
    padding: 14px 16px !important;
  }
}

/* ============================================================
   CHAT POLISH v9: balanced desktop/tablet/phone chat layout
   - thinner square message frames
   - collapse accidental line breaks so text stays horizontal
   - wider/taller composer with balanced action buttons
   ============================================================ */
@media (min-width: 1025px) {
  #chatModal .chat-shell {
    grid-template-columns: 240px minmax(0, 1fr) !important;
  }
  #chatModal .chat-sidebar.chat-sidebar-minimal {
    padding-right: 28px !important;
  }
  #chatModal .chat-main {
    padding-left: 24px !important;
  }
}

#chatModal .chat-bubble,
#chatModal .chat-bubble.is-self {
  gap: 9px !important;
  margin-bottom: 12px !important;
}

#chatModal .chat-bubble-content,
#chatModal .chat-bubble.is-self .chat-bubble-content {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: min(76%, 760px) !important;
  min-width: 0 !important;
}

#chatModal .chat-bubble-text,
#chatModal .chat-bubble.is-self .chat-bubble-text {
  display: inline-block !important;
  width: auto !important;
  min-width: 72px !important;
  max-width: 100% !important;
  padding: 10px 15px !important;
  border-radius: 0 !important;
  border-width: 1px !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.58 !important;
}

#chatModal .chat-composer {
  padding-top: 16px !important;
}

#chatModal .chat-composer-form {
  width: 100% !important;
  gap: 12px !important;
}

#chatModal .chat-message-input {
  width: 100% !important;
  min-height: 116px !important;
  height: 116px !important;
  padding: 17px 20px !important;
  line-height: 1.55 !important;
  border-radius: 14px !important;
}

#chatModal .chat-composer-footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}

#chatModal .chat-composer-helper-row {
  justify-content: flex-start !important;
  min-width: 0 !important;
}

#chatModal .chat-modal-actions {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: auto !important;
}

#chatModal .chat-modal-actions .btn {
  min-height: 50px !important;
  padding: 0 22px !important;
  border-radius: 14px !important;
  white-space: nowrap !important;
}

#chatModal .chat-modal-actions .secondary-btn {
  min-width: 142px !important;
}

#chatModal .chat-send-primary {
  min-width: 174px !important;
}

@media (min-width: 761px) and (max-width: 1024px) {
  #chatModal .chat-shell {
    grid-template-columns: 210px minmax(0, 1fr) !important;
  }
  #chatModal .chat-bubble-content,
  #chatModal .chat-bubble.is-self .chat-bubble-content {
    max-width: min(82%, 680px) !important;
  }
  #chatModal .chat-message-input {
    min-height: 104px !important;
    height: 104px !important;
  }
  #chatModal .chat-modal-actions .secondary-btn {
    min-width: 124px !important;
  }
  #chatModal .chat-send-primary {
    min-width: 150px !important;
  }
}

@media (max-width: 760px) {
  #chatModal .chat-bubble-content,
  #chatModal .chat-bubble.is-self .chat-bubble-content {
    max-width: calc(100% - 42px) !important;
  }
  #chatModal .chat-bubble-text,
  #chatModal .chat-bubble.is-self .chat-bubble-text {
    min-width: 56px !important;
    padding: 9px 12px !important;
  }
  #chatModal .chat-message-input {
    min-height: 90px !important;
    height: 90px !important;
    padding: 15px 16px !important;
  }
  #chatModal .chat-composer-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 9px !important;
  }
  #chatModal .chat-modal-actions {
    width: 100% !important;
  }
  #chatModal .chat-modal-actions .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 0 12px !important;
  }
  #chatModal .chat-send-primary {
    max-width: none !important;
  }
}

/* ============================================================
   CHAT FIX v10: fix ipad/short-message box + shorter, wider composer
   ============================================================ */
#chatModal .chat-bubble,
#chatModal .chat-bubble.is-self {
  gap: 10px !important;
}

#chatModal .chat-bubble-content,
#chatModal .chat-bubble.is-self .chat-bubble-content {
  max-width: min(84%, 860px) !important;
  min-width: 132px !important;
}

#chatModal .chat-bubble-text,
#chatModal .chat-bubble.is-self .chat-bubble-text {
  display: block !important;
  width: fit-content !important;
  min-width: 132px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 10px 14px !important;
  line-height: 1.52 !important;
}

#chatModal .chat-main {
  padding-bottom: 14px !important;
}

#chatModal .chat-composer {
  padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 2px) !important;
}

#chatModal .chat-composer-form {
  width: 100% !important;
  gap: 10px !important;
}

#chatModal .chat-message-input {
  width: 100% !important;
  min-height: 86px !important;
  height: 86px !important;
  padding: 14px 18px !important;
  border-radius: 12px !important;
}

@media (min-width: 761px) and (max-width: 1024px) {
  #chatModal .chat-bubble-content,
  #chatModal .chat-bubble.is-self .chat-bubble-content {
    max-width: min(86%, 720px) !important;
    min-width: 118px !important;
  }
  #chatModal .chat-bubble-text,
  #chatModal .chat-bubble.is-self .chat-bubble-text {
    min-width: 118px !important;
  }
  #chatModal .chat-message-input {
    min-height: 78px !important;
    height: 78px !important;
    padding: 13px 16px !important;
  }
}

@media (max-width: 760px) {
  #chatModal .chat-bubble-content,
  #chatModal .chat-bubble.is-self .chat-bubble-content {
    max-width: calc(100% - 42px) !important;
    min-width: 92px !important;
  }
  #chatModal .chat-bubble-text,
  #chatModal .chat-bubble.is-self .chat-bubble-text {
    min-width: 92px !important;
    padding: 9px 12px !important;
  }
  #chatModal .chat-message-input {
    min-height: 72px !important;
    height: 72px !important;
    padding: 12px 14px !important;
  }
}

/* ============================================================
   CHAT FIX v11: restore old-style composer from historical screenshot
   ============================================================ */
#chatModal .chat-composer {
  padding: 14px 0 calc(env(safe-area-inset-bottom, 0px) + 2px) !important;
}

#chatModal .chat-composer-form {
  width: 100% !important;
  gap: 12px !important;
}

#chatModal .chat-message-input {
  width: 100% !important;
  min-height: 124px !important;
  height: 124px !important;
  padding: 18px 20px !important;
  border-radius: 22px !important;
  line-height: 1.55 !important;
}

#chatModal .chat-composer-footer {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
}

#chatModal .chat-composer-helper-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-width: 0 !important;
}

#chatModal .composer-helper {
  display: block !important;
}

#chatModal .char-counter {
  margin-left: 0 !important;
  white-space: nowrap !important;
}

#chatModal .chat-modal-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  width: auto !important;
}

#chatModal .chat-modal-actions .btn {
  min-height: 54px !important;
  padding: 0 24px !important;
  border-radius: 18px !important;
  white-space: nowrap !important;
}

#chatModal .chat-modal-actions .secondary-btn {
  min-width: 148px !important;
}

#chatModal .chat-send-primary {
  min-width: 182px !important;
}

@media (min-width: 761px) and (max-width: 1024px) {
  #chatModal .chat-message-input {
    min-height: 112px !important;
    height: 112px !important;
    padding: 16px 18px !important;
    border-radius: 20px !important;
  }
  #chatModal .chat-modal-actions .btn {
    min-height: 52px !important;
    padding: 0 20px !important;
  }
  #chatModal .chat-modal-actions .secondary-btn {
    min-width: 132px !important;
  }
  #chatModal .chat-send-primary {
    min-width: 162px !important;
  }
}

@media (max-width: 760px) {
  #chatModal .chat-message-input {
    min-height: 96px !important;
    height: 96px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
  }
  #chatModal .chat-composer-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  #chatModal .chat-composer-helper-row {
    gap: 10px !important;
  }
  #chatModal .chat-modal-actions {
    width: 100% !important;
  }
  #chatModal .chat-modal-actions .btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 0 12px !important;
    border-radius: 16px !important;
  }
  #chatModal .chat-send-primary {
    max-width: none !important;
  }
}


/* ============================================================
   CHAT FIX v12: make composer input truly wider across desktop/tablet
   Why: previous width:100% was limited by older centering rules on #chatMessageInput.
   ============================================================ */
#chatModal .chat-composer {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

#chatModal .chat-composer-form {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
}

#chatModal #chatMessageInput.chat-message-input,
html[dir="rtl"] #chatModal #chatMessageInput.chat-message-input,
body[dir="rtl"] #chatModal #chatMessageInput.chat-message-input,
body.is-rtl #chatModal #chatMessageInput.chat-message-input,
body.is-arabic-mobile-chat-fix #chatModal #chatMessageInput.chat-message-input {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  align-self: stretch !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  min-height: 124px !important;
  height: 124px !important;
  padding: 18px 20px !important;
  border-radius: 22px !important;
  text-align: left !important;
}

#chatModal .chat-composer-footer {
  width: 100% !important;
  max-width: none !important;
}

@media (min-width: 1025px) {
  #chatModal .chat-main {
    padding-right: 22px !important;
  }
  #chatModal #chatMessageInput.chat-message-input {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (min-width: 761px) and (max-width: 1024px) {
  #chatModal #chatMessageInput.chat-message-input {
    min-height: 112px !important;
    height: 112px !important;
  }
}

@media (max-width: 760px) {
  #chatModal #chatMessageInput.chat-message-input {
    width: 100% !important;
    max-width: none !important;
    min-height: 96px !important;
    height: 96px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
  }
}

/* ============================================================
   CHAT FIX v13: shorter full-width composer
   No blocker: only override the final v12 min-height/height rules.
   ============================================================ */
#chatModal #chatMessageInput.chat-message-input,
html[dir="rtl"] #chatModal #chatMessageInput.chat-message-input,
body[dir="rtl"] #chatModal #chatMessageInput.chat-message-input,
body.is-rtl #chatModal #chatMessageInput.chat-message-input,
body.is-arabic-mobile-chat-fix #chatModal #chatMessageInput.chat-message-input {
  width: 100% !important;
  max-width: none !important;
  min-height: 88px !important;
  height: 88px !important;
  padding: 14px 20px !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
}

#chatModal .chat-composer {
  padding-top: 10px !important;
}

@media (min-width: 761px) and (max-width: 1024px) {
  #chatModal #chatMessageInput.chat-message-input,
  html[dir="rtl"] #chatModal #chatMessageInput.chat-message-input,
  body[dir="rtl"] #chatModal #chatMessageInput.chat-message-input,
  body.is-rtl #chatModal #chatMessageInput.chat-message-input,
  body.is-arabic-mobile-chat-fix #chatModal #chatMessageInput.chat-message-input {
    min-height: 78px !important;
    height: 78px !important;
    padding: 13px 18px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 760px) {
  #chatModal #chatMessageInput.chat-message-input,
  html[dir="rtl"] #chatModal #chatMessageInput.chat-message-input,
  body[dir="rtl"] #chatModal #chatMessageInput.chat-message-input,
  body.is-rtl #chatModal #chatMessageInput.chat-message-input,
  body.is-arabic-mobile-chat-fix #chatModal #chatMessageInput.chat-message-input {
    min-height: 68px !important;
    height: 68px !important;
    padding: 11px 14px !important;
    border-radius: 15px !important;
  }
}

/* ============================================================
   CHAT FIX v14: preserve typed name case + show sender name on every message
   Requested scope: only these two changes.
   ============================================================ */
#chatModal .chat-name-btn,
#chatModal .chat-bubble-head .chat-name-btn,
#chatModal .chat-sidebar .chat-list-item strong,
#chatModal #chatUsersList .chat-list-item strong {
  text-transform: none !important;
}

#chatModal .chat-bubble.is-self .chat-bubble-head,
#chatModal .chat-bubble.is-self .chat-bubble-content .chat-bubble-head {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin: 0 4px 3px 0 !important;
  padding: 0 !important;
  background: none !important;
}

#chatModal .chat-bubble.is-self .chat-name-btn {
  display: inline-block !important;
  text-transform: none !important;
  opacity: .95 !important;
}



/* ============================================================
   CHAT FIX v18: remove sender-colour bars on phone completely
   Root cause: old nth-child sticky-note rules still color .chat-bubble
   with higher specificity than the earlier cleanup. Override those
   exact mobile selectors and keep only the real small message box.
   ============================================================ */
@media (max-width: 760px) {
  #chatModal .chat-message-list .chat-bubble,
  #chatModal #chatMessages .chat-bubble,
  #chatModal .chat-message-list .chat-bubble.is-self,
  #chatModal #chatMessages .chat-bubble.is-self,
  #chatModal .chat-message-list .chat-bubble:nth-child(5n+1),
  #chatModal .chat-message-list .chat-bubble:nth-child(5n+2),
  #chatModal .chat-message-list .chat-bubble:nth-child(5n+3),
  #chatModal .chat-message-list .chat-bubble:nth-child(5n+4),
  #chatModal .chat-message-list .chat-bubble:nth-child(5n+5),
  #chatModal #chatMessages .chat-bubble:nth-child(5n+1),
  #chatModal #chatMessages .chat-bubble:nth-child(5n+2),
  #chatModal #chatMessages .chat-bubble:nth-child(5n+3),
  #chatModal #chatMessages .chat-bubble:nth-child(5n+4),
  #chatModal #chatMessages .chat-bubble:nth-child(5n+5) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    outline: 0 !important;
  }

  #chatModal .chat-message-list .chat-bubble::before,
  #chatModal .chat-message-list .chat-bubble::after,
  #chatModal #chatMessages .chat-bubble::before,
  #chatModal #chatMessages .chat-bubble::after,
  #chatModal .chat-message-list .chat-bubble.is-self::before,
  #chatModal .chat-message-list .chat-bubble.is-self::after,
  #chatModal #chatMessages .chat-bubble.is-self::before,
  #chatModal #chatMessages .chat-bubble.is-self::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #chatModal .chat-message-list .chat-bubble-content,
  #chatModal #chatMessages .chat-bubble-content,
  #chatModal .chat-message-list .chat-bubble.is-self .chat-bubble-content,
  #chatModal #chatMessages .chat-bubble.is-self .chat-bubble-content {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  #chatModal .chat-message-list .chat-bubble-content::before,
  #chatModal .chat-message-list .chat-bubble-content::after,
  #chatModal #chatMessages .chat-bubble-content::before,
  #chatModal #chatMessages .chat-bubble-content::after {
    content: none !important;
    display: none !important;
  }

  /* Real message box only: same style for all senders, no sender-colour band */
  #chatModal .chat-message-list .chat-bubble-text,
  #chatModal #chatMessages .chat-bubble-text,
  #chatModal .chat-message-list .chat-bubble.is-self .chat-bubble-text,
  #chatModal #chatMessages .chat-bubble.is-self .chat-bubble-text {
    display: inline-block !important;
    width: auto !important;
    min-width: 48px !important;
    max-width: min(74vw, 300px) !important;
    padding: 9px 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: rgba(255, 232, 122, 0.10) !important;
    background-color: rgba(255, 232, 122, 0.10) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 232, 122, 0.38) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #ffe87a !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.20) !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    white-space: pre-wrap !important;
  }

  #chatModal .chat-message-list .chat-bubble-head,
  #chatModal #chatMessages .chat-bubble-head,
  #chatModal .chat-message-list .chat-bubble.is-self .chat-bubble-head,
  #chatModal #chatMessages .chat-bubble.is-self .chat-bubble-head {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   CHAT FIX v19: scalable participant list
   Desktop/tablet: participant list scrolls inside the sidebar.
   Phone: participant list becomes a single horizontal scrolling row.
   ============================================================ */
#chatModal .chat-sidebar.chat-sidebar-minimal {
  min-height: 0 !important;
  overflow: hidden !important;
}

#chatModal #chatPeoplePanel.chat-people-panel {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

#chatModal .chat-sidebar-head.chat-sidebar-head-minimal {
  flex: 0 0 auto !important;
}

#chatModal .chat-mini-list.chat-mini-list-minimal,
#chatModal #chatUsersList.chat-mini-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  padding-right: 6px !important;
}

@media (min-width: 761px) {
  #chatModal .chat-shell {
    min-height: 0 !important;
    height: min(74vh, 760px) !important;
  }

  #chatModal .chat-sidebar.chat-sidebar-minimal {
    height: 100% !important;
    max-height: 100% !important;
    align-self: stretch !important;
  }

  #chatModal .chat-main {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  #chatModal .chat-mini-list.chat-mini-list-minimal::-webkit-scrollbar,
  #chatModal #chatUsersList.chat-mini-list::-webkit-scrollbar {
    width: 7px !important;
  }
}

@media (max-width: 760px) {
  #chatModal .chat-shell {
    min-height: 0 !important;
  }

  #chatModal .chat-sidebar.chat-sidebar-minimal {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-height: 122px !important;
    overflow: hidden !important;
    padding: 0 0 8px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,248,220,.14) !important;
  }

  #chatModal #chatPeoplePanel.chat-people-panel {
    height: auto !important;
    max-height: 122px !important;
    overflow: hidden !important;
  }

  #chatModal .chat-sidebar-head.chat-sidebar-head-minimal {
    margin: 0 0 8px !important;
    padding: 0 2px !important;
  }

  #chatModal .chat-mini-list.chat-mini-list-minimal,
  #chatModal #chatUsersList.chat-mini-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 2px 8px !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #chatModal .chat-mini-list.chat-mini-list-minimal::-webkit-scrollbar,
  #chatModal #chatUsersList.chat-mini-list::-webkit-scrollbar {
    height: 4px !important;
    display: block !important;
  }

  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item.is-presence,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item.is-active,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item:hover,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item:focus-visible {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 132px !important;
    max-width: 220px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    scroll-snap-align: start !important;
    white-space: nowrap !important;
  }

  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item strong {
    display: block !important;
    max-width: 170px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item span,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-user-self-tag {
    display: none !important;
  }
}

/* ============================================================
   CHAT FIX v20: fit participant chips to their names on phone
   Phone only: keep horizontal scrolling but avoid oversized name boxes.
   ============================================================ */
@media (max-width: 760px) {
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item.is-presence,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item.is-active,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item:hover,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item:focus-visible {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: fit-content !important;
    min-width: 88px !important;
    max-width: 220px !important;
    min-height: 54px !important;
    padding: 10px 16px !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item > div,
  #chatModal #chatUsersList .chat-list-item > div {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item strong,
  #chatModal #chatUsersList .chat-list-item strong {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 176px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* ============================================================
   CHAT FIX v21: make mobile participant chips hug the name tighter
   ============================================================ */
@media (max-width: 760px) {
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item.is-presence,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item.is-active,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item:hover,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item:focus-visible,
  #chatModal #chatUsersList .chat-list-item,
  #chatModal #chatUsersList .chat-list-item.is-presence,
  #chatModal #chatUsersList .chat-list-item.is-active,
  #chatModal #chatUsersList .chat-list-item:hover,
  #chatModal #chatUsersList .chat-list-item:focus-visible {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: 0 !important;
    max-width: min(72vw, 200px) !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item > div,
  #chatModal #chatUsersList .chat-list-item > div {
    display: block !important;
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item strong,
  #chatModal #chatUsersList .chat-list-item strong {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: min(52vw, 150px) !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item span,
  #chatModal .chat-sidebar.chat-sidebar-minimal .chat-user-self-tag,
  #chatModal #chatUsersList .chat-list-item span,
  #chatModal #chatUsersList .chat-user-self-tag {
    display: none !important;
  }
}

/* ============================================================
   CHAT FIX v22: place message time beside sender name
   Especially improves readability on phone.
   ============================================================ */
#chatModal .chat-bubble-head,
#chatModal .chat-bubble.is-self .chat-bubble-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#chatModal .chat-bubble-head .chat-name-btn,
#chatModal .chat-bubble.is-self .chat-bubble-head .chat-name-btn {
  flex: 0 1 auto !important;
}

#chatModal .chat-bubble-time,
#chatModal .chat-bubble.is-self .chat-bubble-time {
  position: static !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  opacity: 0.8 !important;
}

#chatModal .chat-bubble.is-self .chat-bubble-head {
  justify-content: flex-end !important;
}

@media (max-width: 760px) {
  #chatModal .chat-message-list .chat-bubble-head,
  #chatModal #chatMessages .chat-bubble-head,
  #chatModal .chat-message-list .chat-bubble.is-self .chat-bubble-head,
  #chatModal #chatMessages .chat-bubble.is-self .chat-bubble-head {
    gap: 6px !important;
    margin-bottom: 4px !important;
  }

  #chatModal .chat-message-list .chat-bubble-head .chat-name-btn,
  #chatModal #chatMessages .chat-bubble-head .chat-name-btn,
  #chatModal .chat-message-list .chat-bubble.is-self .chat-bubble-head .chat-name-btn,
  #chatModal #chatMessages .chat-bubble.is-self .chat-bubble-head .chat-name-btn {
    max-width: none !important;
  }

  #chatModal .chat-message-list .chat-bubble-time,
  #chatModal #chatMessages .chat-bubble-time,
  #chatModal .chat-message-list .chat-bubble.is-self .chat-bubble-time,
  #chatModal #chatMessages .chat-bubble.is-self .chat-bubble-time {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
}

/* ============================================================
   CHAT FIX v23: remove sender icon before others' messages on all devices
   ============================================================ */
#chatModal .chat-bubble-avatar,
#chatModal .chat-bubble.is-self .chat-bubble-avatar {
  display: none !important;
}

/* ============================================================
   CHAT FIX v24: self-message text only should be white
   Scope: both mobile and desktop. Do not change others' message text.
   ============================================================ */
#chatModal .chat-bubble.is-self .chat-bubble-text,
#chatModal .chat-message-list .chat-bubble.is-self .chat-bubble-text,
#chatModal #chatMessages .chat-bubble.is-self .chat-bubble-text {
  color: #ffffff !important;
}

/* ============================================================
   CHAT FIX v25: others' message text should be yellow
   Scope: both mobile and desktop.
   Keep self-message text white.
   ============================================================ */
#chatModal .chat-bubble:not(.is-self) .chat-bubble-text,
#chatModal .chat-message-list .chat-bubble:not(.is-self) .chat-bubble-text,
#chatModal #chatMessages .chat-bubble:not(.is-self) .chat-bubble-text {
  color: #ffe87a !important;
}

/* v353: chat leave state - keeps the original chat window open while sending is disabled. */
#chatModal .chat-left-room-notice{
  margin:0 0 10px;
  padding:10px 12px;
  border:2px solid rgba(255,116,116,.28);
  border-radius:16px;
  background:linear-gradient(180deg,#fffdf9,#fff5ee);
  color:#5f4d3f;
  font-size:12px;
  line-height:1.45;
  font-weight:800;
}
#chatModal .chat-left-room-notice strong{
  display:block;
  color:#2f261f;
  font-size:13px;
  margin-bottom:2px;
}
#chatModal .chat-left-room-notice span{
  display:block;
}
#chatModal .chat-message-input:disabled{
  opacity:.72;
  cursor:not-allowed;
}

/* v355: chat room status events as plain centered text, not message bubbles. */
#chatModal .chat-bubble.is-system,
#chatModal .chat-message-list .chat-bubble.is-system,
#chatModal #chatMessages .chat-bubble.is-system{
  align-self:center !important;
  max-width:100% !important;
  width:auto !important;
  padding:4px 0 !important;
  margin:2px auto 10px !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  text-align:center !important;
}
#chatModal .chat-bubble.is-system::before,
#chatModal .chat-bubble.is-system::after{
  content:none !important;
  display:none !important;
}
#chatModal .chat-bubble.is-system + .chat-bubble{
  border-top:none !important;
  padding-top:0 !important;
}
#chatModal .chat-bubble.is-system .chat-bubble-content{
  display:inline-flex !important;
  align-items:baseline !important;
  justify-content:center !important;
  gap:8px !important;
  opacity:.76 !important;
}
#chatModal .chat-bubble.is-system .chat-bubble-text{
  color:rgba(255,248,220,.82) !important;
  font-size:12px !important;
  font-weight:800 !important;
  font-style:italic !important;
  line-height:1.45 !important;
  text-shadow:none !important;
}
#chatModal .chat-bubble.is-system .chat-bubble-time{
  margin-left:0 !important;
  color:rgba(255,248,220,.52) !important;
  font-size:10px !important;
  font-weight:700 !important;
  text-shadow:none !important;
}


/* v356: iOS Safari keyboard / visual viewport safety for Free chat.
   This only applies when JS detects an iPhone/iPad-like browser. */
body.is-chat-ios-safe #chatModal:not([hidden]){
  height:var(--okss-chat-visual-vh, 100dvh) !important;
  max-height:var(--okss-chat-visual-vh, 100dvh) !important;
}
@media (max-width:760px){
  body.is-chat-ios-safe #chatModal .chat-card{
    height:var(--okss-chat-visual-vh, 100dvh) !important;
    max-height:var(--okss-chat-visual-vh, 100dvh) !important;
  }
  body.is-chat-ios-safe.is-chat-keyboard-open #chatModal .chat-modal-body{
    padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.is-chat-ios-safe.is-chat-keyboard-open #chatModal .chat-message-list{
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
  }
  body.is-chat-ios-safe.is-chat-keyboard-open #chatModal .chat-composer{
    padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* v357: Arabic Free chat RTL pass for desktop and phone.
   Mirrors the chat layout without changing other languages. */
html[lang="ar"] #chatModal,
body.is-chat-rtl #chatModal{
  direction:rtl !important;
  font-family:var(--font-ui-ar, "Noto Naskh Arabic", "Tahoma", "Arial", system-ui, sans-serif) !important;
}
html[lang="ar"] #chatModal .chat-card,
html[lang="ar"] #chatModal .chat-modal-body,
html[lang="ar"] #chatModal .chat-intro-view,
html[lang="ar"] #chatModal .chat-shell,
html[lang="ar"] #chatModal .chat-main,
html[lang="ar"] #chatModal .chat-sidebar,
html[lang="ar"] #chatModal .chat-composer,
body.is-chat-rtl #chatModal .chat-card,
body.is-chat-rtl #chatModal .chat-modal-body,
body.is-chat-rtl #chatModal .chat-intro-view,
body.is-chat-rtl #chatModal .chat-shell,
body.is-chat-rtl #chatModal .chat-main,
body.is-chat-rtl #chatModal .chat-sidebar,
body.is-chat-rtl #chatModal .chat-composer{
  direction:rtl !important;
  text-align:right !important;
}
html[lang="ar"] #chatModal .chat-modal-head,
body.is-chat-rtl #chatModal .chat-modal-head{
  direction:ltr !important;
  flex-direction:row !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
}
html[lang="ar"] #chatModal .chat-head-actions,
body.is-chat-rtl #chatModal .chat-head-actions{
  order:1 !important;
  margin-right:0 !important;
  margin-left:14px !important;
}
html[lang="ar"] #chatModal .chat-modal-titlewrap,
body.is-chat-rtl #chatModal .chat-modal-titlewrap{
  order:2 !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  direction:rtl !important;
  text-align:right !important;
}
html[lang="ar"] #chatModal .chat-modal-titleline,
body.is-chat-rtl #chatModal .chat-modal-titleline{
  direction:rtl !important;
  text-align:right !important;
  justify-content:flex-start !important;
  align-items:baseline !important;
}
html[lang="ar"] #chatModal .chat-modal-titleline::after,
body.is-chat-rtl #chatModal .chat-modal-titleline::after{
  content:"اضغط على اسم لفتح دردشة خاصة." !important;
  direction:rtl !important;
  text-align:right !important;
  unicode-bidi:plaintext !important;
  font-family:var(--font-ui-ar, system-ui, sans-serif) !important;
}
html[lang="ar"] #chatModal .chat-intro-card,
body.is-chat-rtl #chatModal .chat-intro-card{
  direction:rtl !important;
  text-align:center !important;
}
html[lang="ar"] #chatModal .chat-intro-title,
html[lang="ar"] #chatModal .chat-intro-copy,
body.is-chat-rtl #chatModal .chat-intro-title,
body.is-chat-rtl #chatModal .chat-intro-copy{
  direction:rtl !important;
  text-align:center !important;
  unicode-bidi:plaintext !important;
}
html[lang="ar"] #chatModal #chatEntryAliasInput,
html[lang="ar"] #chatModal #chatAliasInput,
html[lang="ar"] #chatModal #chatMessageInput,
body.is-chat-rtl #chatModal #chatEntryAliasInput,
body.is-chat-rtl #chatModal #chatAliasInput,
body.is-chat-rtl #chatModal #chatMessageInput{
  direction:rtl !important;
  text-align:right !important;
  unicode-bidi:plaintext !important;
  font-family:var(--font-ui-ar, system-ui, sans-serif) !important;
}
html[lang="ar"] #chatModal #chatEntryAliasInput::placeholder,
html[lang="ar"] #chatModal #chatAliasInput::placeholder,
html[lang="ar"] #chatModal #chatMessageInput::placeholder,
body.is-chat-rtl #chatModal #chatEntryAliasInput::placeholder,
body.is-chat-rtl #chatModal #chatAliasInput::placeholder,
body.is-chat-rtl #chatModal #chatMessageInput::placeholder{
  direction:rtl !important;
  text-align:right !important;
}
@media (min-width:761px){
  html[lang="ar"] #chatModal .chat-shell,
  body.is-chat-rtl #chatModal .chat-shell{
    grid-template-columns:minmax(0,1fr) 300px !important;
    direction:ltr !important;
  }
  html[lang="ar"] #chatModal .chat-sidebar.chat-sidebar-minimal,
  body.is-chat-rtl #chatModal .chat-sidebar.chat-sidebar-minimal{
    grid-column:2 !important;
    grid-row:1 !important;
    direction:rtl !important;
    text-align:right !important;
    padding:8px 0 18px 28px !important;
    border-right:1px solid rgba(255,248,220,.24) !important;
    border-left:none !important;
  }
  html[lang="ar"] #chatModal .chat-main,
  body.is-chat-rtl #chatModal .chat-main{
    grid-column:1 !important;
    grid-row:1 !important;
    direction:rtl !important;
    padding:8px 28px 0 0 !important;
  }
  html[lang="ar"] #chatModal .chat-sidebar-head.chat-sidebar-head-minimal,
  body.is-chat-rtl #chatModal .chat-sidebar-head.chat-sidebar-head-minimal{
    direction:rtl !important;
    flex-direction:row-reverse !important;
    text-align:right !important;
  }
}
html[lang="ar"] #chatModal .chat-mini-list.chat-mini-list-minimal,
body.is-chat-rtl #chatModal .chat-mini-list.chat-mini-list-minimal{
  direction:rtl !important;
  text-align:right !important;
}
html[lang="ar"] #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item,
html[lang="ar"] #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item strong,
html[lang="ar"] #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item span,
body.is-chat-rtl #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item,
body.is-chat-rtl #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item strong,
body.is-chat-rtl #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item span{
  direction:rtl !important;
  text-align:right !important;
  unicode-bidi:plaintext !important;
}
html[lang="ar"] #chatModal .chat-room-banner,
html[lang="ar"] #chatModal .chat-room-heading-inline,
html[lang="ar"] #chatModal .chat-room-title,
html[lang="ar"] #chatModal .chat-room-copy,
body.is-chat-rtl #chatModal .chat-room-banner,
body.is-chat-rtl #chatModal .chat-room-heading-inline,
body.is-chat-rtl #chatModal .chat-room-title,
body.is-chat-rtl #chatModal .chat-room-copy{
  direction:rtl !important;
  text-align:right !important;
  justify-content:flex-start !important;
  unicode-bidi:plaintext !important;
}
html[lang="ar"] #chatModal .chat-message-list,
body.is-chat-rtl #chatModal .chat-message-list{
  direction:rtl !important;
  text-align:right !important;
  align-items:stretch !important;
  overflow-x:hidden !important;
}
html[lang="ar"] #chatModal .chat-bubble,
html[lang="ar"] #chatModal .chat-bubble.is-self,
html[lang="ar"] #chatModal .chat-bubble.is-rtl-chat,
body.is-chat-rtl #chatModal .chat-bubble,
body.is-chat-rtl #chatModal .chat-bubble.is-self,
body.is-chat-rtl #chatModal .chat-bubble.is-rtl-chat{
  direction:rtl !important;
  text-align:right !important;
  align-self:stretch !important;
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
}
html[lang="ar"] #chatModal .chat-bubble-head,
html[lang="ar"] #chatModal .chat-bubble.is-self .chat-bubble-head,
body.is-chat-rtl #chatModal .chat-bubble-head,
body.is-chat-rtl #chatModal .chat-bubble.is-self .chat-bubble-head{
  direction:rtl !important;
  display:flex !important;
  flex-direction:row !important;
  justify-content:flex-start !important;
  align-items:center !important;
  align-self:flex-end !important;
  width:auto !important;
  max-width:100% !important;
  gap:8px !important;
  margin:0 0 5px auto !important;
  text-align:right !important;
}
html[lang="ar"] #chatModal .chat-name-btn,
html[lang="ar"] #chatModal .chat-bubble-head .chat-name-btn,
body.is-chat-rtl #chatModal .chat-name-btn,
body.is-chat-rtl #chatModal .chat-bubble-head .chat-name-btn{
  direction:auto !important;
  unicode-bidi:plaintext !important;
  text-align:right !important;
  margin:0 !important;
}
html[lang="ar"] #chatModal .chat-bubble-time,
html[lang="ar"] #chatModal .chat-bubble-time[dir="ltr"],
body.is-chat-rtl #chatModal .chat-bubble-time,
body.is-chat-rtl #chatModal .chat-bubble-time[dir="ltr"]{
  direction:ltr !important;
  unicode-bidi:isolate !important;
  text-align:left !important;
  margin:0 !important;
  white-space:nowrap !important;
}
html[lang="ar"] #chatModal .chat-bubble-text,
html[lang="ar"] #chatModal .chat-bubble-text[dir="auto"],
body.is-chat-rtl #chatModal .chat-bubble-text,
body.is-chat-rtl #chatModal .chat-bubble-text[dir="auto"]{
  direction:auto !important;
  unicode-bidi:plaintext !important;
  text-align:right !important;
  align-self:flex-end !important;
  width:100% !important;
}
html[lang="ar"] #chatModal .chat-bubble.is-system,
body.is-chat-rtl #chatModal .chat-bubble.is-system{
  align-items:center !important;
  text-align:center !important;
  direction:rtl !important;
}
html[lang="ar"] #chatModal .chat-bubble.is-system .chat-bubble-content,
body.is-chat-rtl #chatModal .chat-bubble.is-system .chat-bubble-content{
  direction:rtl !important;
  flex-direction:row !important;
  text-align:center !important;
}
html[lang="ar"] #chatModal .chat-bubble.is-system .chat-bubble-text,
body.is-chat-rtl #chatModal .chat-bubble.is-system .chat-bubble-text{
  direction:rtl !important;
  text-align:center !important;
  unicode-bidi:plaintext !important;
  font-family:var(--font-ui-ar, system-ui, sans-serif) !important;
}
html[lang="ar"] #chatModal .chat-left-room-notice,
body.is-chat-rtl #chatModal .chat-left-room-notice{
  direction:rtl !important;
  text-align:right !important;
  unicode-bidi:plaintext !important;
}
html[lang="ar"] #chatModal .chat-composer-helper-row,
html[lang="ar"] #chatModal .chat-modal-actions,
body.is-chat-rtl #chatModal .chat-composer-helper-row,
body.is-chat-rtl #chatModal .chat-modal-actions{
  direction:rtl !important;
  text-align:right !important;
}
html[lang="ar"] #chatModal .chat-kbd-inline,
body.is-chat-rtl #chatModal .chat-kbd-inline{
  direction:ltr !important;
  unicode-bidi:isolate !important;
}
@media (max-width:760px){
  body.is-chat-rtl #chatModal .chat-modal-head,
  html[lang="ar"] #chatModal .chat-modal-head{
    direction:ltr !important;
    padding-inline:14px !important;
  }
  body.is-chat-rtl #chatModal .chat-head-actions,
  html[lang="ar"] #chatModal .chat-head-actions{
    order:1 !important;
    margin-left:10px !important;
    margin-right:0 !important;
  }
  body.is-chat-rtl #chatModal .chat-modal-titlewrap,
  html[lang="ar"] #chatModal .chat-modal-titlewrap{
    order:2 !important;
  }
  body.is-chat-rtl #chatModal .chat-mini-list.chat-mini-list-minimal,
  html[lang="ar"] #chatModal .chat-mini-list.chat-mini-list-minimal{
    direction:rtl !important;
    justify-content:flex-start !important;
  }
  body.is-chat-rtl #chatModal .chat-composer-footer,
  html[lang="ar"] #chatModal .chat-composer-footer{
    direction:rtl !important;
  }
  body.is-chat-rtl #chatModal .chat-modal-actions,
  html[lang="ar"] #chatModal .chat-modal-actions{
    direction:rtl !important;
  }
  body.is-chat-rtl #chatModal #chatBackToStartBtn,
  html[lang="ar"] #chatModal #chatBackToStartBtn,
  body.is-chat-rtl #chatModal #sendChatMessageBtn,
  html[lang="ar"] #chatModal #sendChatMessageBtn{
    direction:rtl !important;
    unicode-bidi:plaintext !important;
  }
}

/* ============================================================
   v358: Arabic conversation reading-order fix
   - Arabic UI keeps participants on the right, but chat messages use
     familiar readable positions: my messages on the right, others on the left.
   - Message text remains RTL/auto-direction aware, with isolated Latin names/times.
   ============================================================ */
body.is-chat-rtl #chatModal .chat-message-list,
html[lang="ar"] #chatModal .chat-message-list,
body.is-chat-rtl #chatModal #chatMessages,
html[lang="ar"] #chatModal #chatMessages{
  direction:rtl !important;
  text-align:right !important;
  align-items:stretch !important;
}

body.is-chat-rtl #chatModal .chat-bubble:not(.is-system),
html[lang="ar"] #chatModal .chat-bubble:not(.is-system){
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  max-width:100% !important;
  align-self:stretch !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
}

/* Others: left side of the conversation, but the Arabic text itself still reads RTL. */
body.is-chat-rtl #chatModal .chat-bubble.is-other:not(.is-system),
html[lang="ar"] #chatModal .chat-bubble.is-other:not(.is-system),
body.is-chat-rtl #chatModal .chat-bubble:not(.is-self):not(.is-system),
html[lang="ar"] #chatModal .chat-bubble:not(.is-self):not(.is-system){
  align-items:flex-start !important;
  text-align:left !important;
}

/* Self: right side, which is natural for Arabic and keeps the owner obvious. */
body.is-chat-rtl #chatModal .chat-bubble.is-self:not(.is-system),
html[lang="ar"] #chatModal .chat-bubble.is-self:not(.is-system){
  align-items:flex-end !important;
  text-align:right !important;
}

body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-content,
html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-content{
  display:flex !important;
  flex-direction:column !important;
  flex:0 1 auto !important;
  width:auto !important;
  min-width:92px !important;
  max-width:min(78%, 760px) !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

body.is-chat-rtl #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-content,
html[lang="ar"] #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-content,
body.is-chat-rtl #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-content,
html[lang="ar"] #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-content{
  align-items:flex-start !important;
}

body.is-chat-rtl #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-content,
html[lang="ar"] #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-content{
  align-items:flex-end !important;
}

/* Header: isolate names and keep timestamps readable as LTR numbers. */
body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-head,
html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-head{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  width:auto !important;
  max-width:100% !important;
  margin:0 0 4px 0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
}

body.is-chat-rtl #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-head,
html[lang="ar"] #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-head,
body.is-chat-rtl #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-head,
html[lang="ar"] #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-head{
  align-self:flex-start !important;
  justify-content:flex-start !important;
  direction:ltr !important;
  text-align:left !important;
}

body.is-chat-rtl #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-head,
html[lang="ar"] #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-head{
  align-self:flex-end !important;
  justify-content:flex-start !important;
  direction:rtl !important;
  text-align:right !important;
}

body.is-chat-rtl #chatModal .chat-name-btn,
html[lang="ar"] #chatModal .chat-name-btn,
body.is-chat-rtl #chatModal .chat-bidi-name,
html[lang="ar"] #chatModal .chat-bidi-name{
  unicode-bidi:isolate !important;
  direction:auto !important;
  text-align:inherit !important;
}

body.is-chat-rtl #chatModal .chat-bubble-time,
html[lang="ar"] #chatModal .chat-bubble-time,
body.is-chat-rtl #chatModal .chat-bubble-time[dir="ltr"],
html[lang="ar"] #chatModal .chat-bubble-time[dir="ltr"]{
  direction:ltr !important;
  unicode-bidi:isolate !important;
  text-align:left !important;
  white-space:nowrap !important;
}

/* Text inside every Arabic-mode message: use browser bidi detection, but align for Arabic reading. */
body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-text,
html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-text,
body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-text[dir="auto"],
html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-text[dir="auto"]{
  direction:auto !important;
  unicode-bidi:plaintext !important;
  text-align:right !important;
  width:auto !important;
  min-width:92px !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  white-space:pre-wrap !important;
  word-break:normal !important;
  overflow-wrap:anywhere !important;
}

/* System room events are not chat bubbles; keep them centered and unboxed in Arabic too. */
body.is-chat-rtl #chatModal .chat-bubble.is-system,
html[lang="ar"] #chatModal .chat-bubble.is-system{
  align-self:center !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  max-width:100% !important;
  margin:4px auto 12px !important;
  padding:0 !important;
  text-align:center !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
body.is-chat-rtl #chatModal .chat-bubble.is-system .chat-bubble-content,
html[lang="ar"] #chatModal .chat-bubble.is-system .chat-bubble-content{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:baseline !important;
  justify-content:center !important;
  gap:8px !important;
  width:auto !important;
  min-width:0 !important;
  max-width:100% !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
body.is-chat-rtl #chatModal .chat-bubble.is-system .chat-bubble-text,
html[lang="ar"] #chatModal .chat-bubble.is-system .chat-bubble-text{
  display:inline !important;
  width:auto !important;
  min-width:0 !important;
  max-width:100% !important;
  padding:0 !important;
  margin:0 !important;
  direction:rtl !important;
  unicode-bidi:plaintext !important;
  text-align:center !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:rgba(255,248,220,.82) !important;
  font-size:12px !important;
  font-style:italic !important;
  font-weight:800 !important;
  line-height:1.45 !important;
}
body.is-chat-rtl #chatModal .chat-bubble.is-system .chat-bubble-time,
html[lang="ar"] #chatModal .chat-bubble.is-system .chat-bubble-time{
  direction:ltr !important;
  unicode-bidi:isolate !important;
  margin:0 !important;
}

@media (max-width:760px){
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-content,
  html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-content{
    max-width:min(82vw, 340px) !important;
    min-width:74px !important;
  }
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-text,
  html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-text{
    min-width:74px !important;
  }
}


/* ============================================================
   v359: Arabic self / other conversation positioning
   - Outer message rows stay physically LTR so flex-start is left and flex-end is right.
   - com1 / current session = right side.
   - Phone1 / other sessions = left side.
   - Arabic text inside bubbles remains RTL/right-aligned for reading.
   ============================================================ */
body.is-chat-rtl #chatModal .chat-message-list,
html[lang="ar"] #chatModal .chat-message-list,
body.is-chat-rtl #chatModal #chatMessages,
html[lang="ar"] #chatModal #chatMessages{
  direction:ltr !important;
  text-align:initial !important;
  align-items:stretch !important;
}
body.is-chat-rtl #chatModal .chat-bubble:not(.is-system),
html[lang="ar"] #chatModal .chat-bubble:not(.is-system){
  direction:ltr !important;
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  max-width:100% !important;
  align-self:stretch !important;
  padding:0 !important;
  margin:0 0 14px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
}
body.is-chat-rtl #chatModal .chat-bubble.is-self:not(.is-system),
html[lang="ar"] #chatModal .chat-bubble.is-self:not(.is-system),
body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system),
html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system){
  align-items:flex-end !important;
  text-align:right !important;
}
body.is-chat-rtl #chatModal .chat-bubble.is-other:not(.is-system),
html[lang="ar"] #chatModal .chat-bubble.is-other:not(.is-system),
body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system),
html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system){
  align-items:flex-start !important;
  text-align:left !important;
}
body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-content,
html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-content{
  direction:rtl !important;
  display:flex !important;
  flex-direction:column !important;
  width:auto !important;
  min-width:92px !important;
  max-width:min(78%, 760px) !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
body.is-chat-rtl #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-content,
html[lang="ar"] #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-content,
body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-content,
html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-content{
  align-items:flex-end !important;
}
body.is-chat-rtl #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-content,
html[lang="ar"] #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-content,
body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system) .chat-bubble-content,
html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system) .chat-bubble-content{
  align-items:flex-start !important;
}
body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-head,
html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-head{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  width:auto !important;
  max-width:100% !important;
  margin:0 0 4px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
body.is-chat-rtl #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-head,
html[lang="ar"] #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-head,
body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-head,
html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-head{
  align-self:flex-end !important;
  justify-content:flex-end !important;
  direction:rtl !important;
  text-align:right !important;
}
body.is-chat-rtl #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-head,
html[lang="ar"] #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-head,
body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system) .chat-bubble-head,
html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system) .chat-bubble-head{
  align-self:flex-start !important;
  justify-content:flex-start !important;
  direction:ltr !important;
  text-align:left !important;
}
body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-text,
html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-text,
body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-text[dir="auto"],
html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-text[dir="auto"]{
  direction:auto !important;
  unicode-bidi:plaintext !important;
  text-align:right !important;
  width:auto !important;
  min-width:92px !important;
  max-width:100% !important;
  white-space:pre-wrap !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}
body.is-chat-rtl #chatModal .chat-bidi-name,
html[lang="ar"] #chatModal .chat-bidi-name,
body.is-chat-rtl #chatModal .chat-name-btn,
html[lang="ar"] #chatModal .chat-name-btn{
  direction:auto !important;
  unicode-bidi:isolate !important;
}
body.is-chat-rtl #chatModal .chat-bubble-time,
html[lang="ar"] #chatModal .chat-bubble-time{
  direction:ltr !important;
  unicode-bidi:isolate !important;
  white-space:nowrap !important;
}
@media (max-width:760px){
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-content,
  html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-content{
    max-width:min(82vw, 340px) !important;
    min-width:74px !important;
  }
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-text,
  html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-text{
    min-width:74px !important;
  }
}


/* ============================================================
   v361: Arabic composer input caret direction fix
   - Forces the Arabic Free chat textarea and alias fields to be true RTL.
   - Keeps placeholder, typed text, and the insertion caret starting from the right.
   - Uses higher specificity and appears after older rules that set text-align:left.
   ============================================================ */
html[lang="ar"] #chatModal textarea#chatMessageInput.chat-message-input,
body.is-chat-rtl #chatModal textarea#chatMessageInput.chat-message-input,
#chatModal textarea#chatMessageInput.chat-message-input.chat-input-rtl,
html[lang="ar"] #chatModal input#chatEntryAliasInput,
html[lang="ar"] #chatModal input#chatAliasInput,
body.is-chat-rtl #chatModal input#chatEntryAliasInput,
body.is-chat-rtl #chatModal input#chatAliasInput,
#chatModal input#chatEntryAliasInput.chat-input-rtl,
#chatModal input#chatAliasInput.chat-input-rtl{
  direction:rtl !important;
  text-align:right !important;
  unicode-bidi:plaintext !important;
}
html[lang="ar"] #chatModal textarea#chatMessageInput.chat-message-input::placeholder,
body.is-chat-rtl #chatModal textarea#chatMessageInput.chat-message-input::placeholder,
#chatModal textarea#chatMessageInput.chat-message-input.chat-input-rtl::placeholder,
html[lang="ar"] #chatModal input#chatEntryAliasInput::placeholder,
html[lang="ar"] #chatModal input#chatAliasInput::placeholder,
body.is-chat-rtl #chatModal input#chatEntryAliasInput::placeholder,
body.is-chat-rtl #chatModal input#chatAliasInput::placeholder,
#chatModal input#chatEntryAliasInput.chat-input-rtl::placeholder,
#chatModal input#chatAliasInput.chat-input-rtl::placeholder{
  direction:rtl !important;
  text-align:right !important;
  unicode-bidi:plaintext !important;
}
#chatModal textarea#chatMessageInput.chat-message-input.chat-input-ltr,
#chatModal input#chatEntryAliasInput.chat-input-ltr,
#chatModal input#chatAliasInput.chat-input-ltr{
  direction:auto !important;
  text-align:left !important;
  unicode-bidi:plaintext !important;
}

/* ============================================================
   v362: Arabic phone-only Free chat layout stabilization
   Scope: Arabic + phone only. Desktop and other languages are intentionally untouched.
   - Uses the same simple mobile chat structure as the other languages.
   - Keeps Arabic reading/writing RTL, but keeps the conversation lane physically LTR
     so self messages can sit right and other messages can sit left without overlap.
   ============================================================ */
@media (max-width: 760px){
  html[lang="ar"] #chatModal,
  body.is-chat-rtl #chatModal{
    direction:rtl !important;
    font-family:var(--font-ui-ar, "Noto Naskh Arabic", "Tahoma", "Arial", system-ui, sans-serif) !important;
  }

  /* Mobile shell: participant chips above, messages in the middle, composer at bottom. */
  html[lang="ar"] #chatModal .chat-modal-body,
  body.is-chat-rtl #chatModal .chat-modal-body{
    overflow:hidden !important;
  }
  html[lang="ar"] #chatModal .chat-shell,
  body.is-chat-rtl #chatModal .chat-shell{
    direction:rtl !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto minmax(0, 1fr) !important;
    gap:12px !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  html[lang="ar"] #chatModal .chat-sidebar.chat-sidebar-minimal,
  body.is-chat-rtl #chatModal .chat-sidebar.chat-sidebar-minimal{
    order:1 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:112px !important;
    padding:0 0 10px !important;
    margin:0 !important;
    border-right:0 !important;
    border-left:0 !important;
    border-bottom:1px solid rgba(255,248,220,.14) !important;
    direction:rtl !important;
    overflow:hidden !important;
  }
  html[lang="ar"] #chatModal #chatPeoplePanel.chat-people-panel,
  body.is-chat-rtl #chatModal #chatPeoplePanel.chat-people-panel{
    height:auto !important;
    max-height:112px !important;
    overflow:hidden !important;
  }
  html[lang="ar"] #chatModal .chat-sidebar-head.chat-sidebar-head-minimal,
  body.is-chat-rtl #chatModal .chat-sidebar-head.chat-sidebar-head-minimal{
    direction:rtl !important;
    text-align:right !important;
    margin:0 0 8px !important;
    padding:0 2px !important;
  }
  html[lang="ar"] #chatModal .chat-mini-list.chat-mini-list-minimal,
  html[lang="ar"] #chatModal #chatUsersList.chat-mini-list,
  body.is-chat-rtl #chatModal .chat-mini-list.chat-mini-list-minimal,
  body.is-chat-rtl #chatModal #chatUsersList.chat-mini-list{
    direction:rtl !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:0 2px 8px !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
  }
  html[lang="ar"] #chatModal .chat-mini-list.chat-mini-list-minimal::-webkit-scrollbar,
  html[lang="ar"] #chatModal #chatUsersList.chat-mini-list::-webkit-scrollbar,
  body.is-chat-rtl #chatModal .chat-mini-list.chat-mini-list-minimal::-webkit-scrollbar,
  body.is-chat-rtl #chatModal #chatUsersList.chat-mini-list::-webkit-scrollbar{
    display:none !important;
  }
  html[lang="ar"] #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item,
  html[lang="ar"] #chatModal #chatUsersList .chat-list-item,
  body.is-chat-rtl #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item,
  body.is-chat-rtl #chatModal #chatUsersList .chat-list-item{
    direction:rtl !important;
    text-align:right !important;
    display:inline-flex !important;
    flex:0 0 auto !important;
    width:max-content !important;
    min-width:0 !important;
    max-width:min(72vw, 210px) !important;
    min-height:0 !important;
    padding:8px 12px !important;
    align-items:center !important;
    justify-content:flex-start !important;
    border-radius:999px !important;
    white-space:nowrap !important;
  }
  html[lang="ar"] #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item strong,
  html[lang="ar"] #chatModal #chatUsersList .chat-list-item strong,
  body.is-chat-rtl #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item strong,
  body.is-chat-rtl #chatModal #chatUsersList .chat-list-item strong{
    direction:auto !important;
    unicode-bidi:isolate !important;
    text-align:right !important;
    max-width:min(56vw, 160px) !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  html[lang="ar"] #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item span,
  html[lang="ar"] #chatModal #chatUsersList .chat-list-item span,
  html[lang="ar"] #chatModal .chat-sidebar.chat-sidebar-minimal .chat-user-self-tag,
  html[lang="ar"] #chatModal #chatUsersList .chat-user-self-tag,
  body.is-chat-rtl #chatModal .chat-sidebar.chat-sidebar-minimal .chat-list-item span,
  body.is-chat-rtl #chatModal #chatUsersList .chat-list-item span,
  body.is-chat-rtl #chatModal .chat-sidebar.chat-sidebar-minimal .chat-user-self-tag,
  body.is-chat-rtl #chatModal #chatUsersList .chat-user-self-tag{
    display:none !important;
  }

  /* Conversation lane: physical LTR for left/right placement only. */
  html[lang="ar"] #chatModal .chat-main,
  body.is-chat-rtl #chatModal .chat-main{
    order:2 !important;
    display:grid !important;
    grid-template-rows:minmax(0, 1fr) auto !important;
    min-height:0 !important;
    padding:0 !important;
    direction:ltr !important;
    overflow:hidden !important;
  }
  html[lang="ar"] #chatModal .chat-room-banner,
  body.is-chat-rtl #chatModal .chat-room-banner{
    display:none !important;
  }
  html[lang="ar"] #chatModal .chat-message-list,
  html[lang="ar"] #chatModal #chatMessages,
  body.is-chat-rtl #chatModal .chat-message-list,
  body.is-chat-rtl #chatModal #chatMessages{
    direction:ltr !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:auto !important;
    overflow-x:hidden !important;
    padding:14px 0 10px !important;
    margin:0 !important;
    border-top:1px solid rgba(255,248,220,.12) !important;
    border-bottom:0 !important;
    -webkit-overflow-scrolling:touch !important;
  }

  /* Normal messages: one compact readable group. No full-width ghost frames. */
  html[lang="ar"] #chatModal .chat-message-list .chat-bubble:not(.is-system),
  html[lang="ar"] #chatModal #chatMessages .chat-bubble:not(.is-system),
  body.is-chat-rtl #chatModal .chat-message-list .chat-bubble:not(.is-system),
  body.is-chat-rtl #chatModal #chatMessages .chat-bubble:not(.is-system){
    direction:ltr !important;
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    max-width:100% !important;
    align-self:stretch !important;
    padding:0 0 12px !important;
    margin:0 0 12px !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    outline:0 !important;
    transform:none !important;
  }
  html[lang="ar"] #chatModal .chat-message-list .chat-bubble:not(.is-system)::before,
  html[lang="ar"] #chatModal .chat-message-list .chat-bubble:not(.is-system)::after,
  html[lang="ar"] #chatModal #chatMessages .chat-bubble:not(.is-system)::before,
  html[lang="ar"] #chatModal #chatMessages .chat-bubble:not(.is-system)::after,
  body.is-chat-rtl #chatModal .chat-message-list .chat-bubble:not(.is-system)::before,
  body.is-chat-rtl #chatModal .chat-message-list .chat-bubble:not(.is-system)::after,
  body.is-chat-rtl #chatModal #chatMessages .chat-bubble:not(.is-system)::before,
  body.is-chat-rtl #chatModal #chatMessages .chat-bubble:not(.is-system)::after{
    content:none !important;
    display:none !important;
  }
  html[lang="ar"] #chatModal .chat-bubble:not(.is-system) + .chat-bubble:not(.is-system),
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) + .chat-bubble:not(.is-system){
    border-top:0 !important;
    padding-top:0 !important;
  }
  html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-content,
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-content{
    display:flex !important;
    flex-direction:column !important;
    flex:0 1 auto !important;
    width:fit-content !important;
    min-width:0 !important;
    max-width:min(78vw, 360px) !important;
    gap:3px !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
    outline:0 !important;
  }
  html[lang="ar"] #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-content,
  html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-content,
  body.is-chat-rtl #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-content,
  body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-content{
    align-self:flex-end !important;
    align-items:flex-end !important;
    text-align:right !important;
  }
  html[lang="ar"] #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-content,
  html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system) .chat-bubble-content,
  html[lang="ar"] #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-content,
  body.is-chat-rtl #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-content,
  body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system) .chat-bubble-content,
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-content{
    align-self:flex-start !important;
    align-items:flex-start !important;
    text-align:left !important;
  }

  /* Header sticks to its message; Latin names and times are isolated. */
  html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-head{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    width:fit-content !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 0 4px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    color:rgba(255,248,220,.72) !important;
    line-height:1.2 !important;
  }
  html[lang="ar"] #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-head,
  html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-head{
    align-self:flex-end !important;
    justify-content:flex-end !important;
    direction:rtl !important;
    text-align:right !important;
  }
  html[lang="ar"] #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-head,
  html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system) .chat-bubble-head,
  html[lang="ar"] #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-head{
    align-self:flex-start !important;
    justify-content:flex-start !important;
    direction:ltr !important;
    text-align:left !important;
  }
  html[lang="ar"] #chatModal .chat-name-btn,
  html[lang="ar"] #chatModal .chat-bidi-name,
  body.is-chat-rtl #chatModal .chat-name-btn,
  body.is-chat-rtl #chatModal .chat-bidi-name{
    direction:auto !important;
    unicode-bidi:isolate !important;
    max-width:54vw !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  html[lang="ar"] #chatModal .chat-bubble-time,
  html[lang="ar"] #chatModal .chat-bubble-time[dir="ltr"],
  body.is-chat-rtl #chatModal .chat-bubble-time,
  body.is-chat-rtl #chatModal .chat-bubble-time[dir="ltr"]{
    direction:ltr !important;
    unicode-bidi:isolate !important;
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
    white-space:nowrap !important;
    text-align:left !important;
    line-height:1.2 !important;
  }

  /* Message text: Arabic reading remains RTL/right aligned; no oversized boxes. */
  html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-text,
  html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-text[dir="auto"],
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-text,
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-text[dir="auto"]{
    display:inline-block !important;
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    outline:0 !important;
    text-align:right !important;
    unicode-bidi:plaintext !important;
    white-space:pre-wrap !important;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
    line-height:1.62 !important;
    font-size:15px !important;
  }
  html[lang="ar"] #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-text,
  html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-text,
  body.is-chat-rtl #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-text,
  body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-text{
    color:#fffdf2 !important;
  }
  html[lang="ar"] #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-text,
  html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system) .chat-bubble-text,
  html[lang="ar"] #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-text,
  body.is-chat-rtl #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-text,
  body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system) .chat-bubble-text,
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-text{
    color:#ffe87a !important;
  }

  /* System room events: one centered line, not a message frame. */
  html[lang="ar"] #chatModal .chat-bubble.is-system,
  html[lang="ar"] #chatModal .chat-message-list .chat-bubble.is-system,
  html[lang="ar"] #chatModal #chatMessages .chat-bubble.is-system,
  body.is-chat-rtl #chatModal .chat-bubble.is-system,
  body.is-chat-rtl #chatModal .chat-message-list .chat-bubble.is-system,
  body.is-chat-rtl #chatModal #chatMessages .chat-bubble.is-system{
    direction:rtl !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    align-self:center !important;
    padding:0 !important;
    margin:3px auto 9px !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    outline:0 !important;
    transform:none !important;
    text-align:center !important;
  }
  html[lang="ar"] #chatModal .chat-bubble.is-system::before,
  html[lang="ar"] #chatModal .chat-bubble.is-system::after,
  body.is-chat-rtl #chatModal .chat-bubble.is-system::before,
  body.is-chat-rtl #chatModal .chat-bubble.is-system::after{
    content:none !important;
    display:none !important;
  }
  html[lang="ar"] #chatModal .chat-bubble.is-system .chat-bubble-content,
  body.is-chat-rtl #chatModal .chat-bubble.is-system .chat-bubble-content{
    direction:rtl !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    outline:0 !important;
    text-align:center !important;
  }
  html[lang="ar"] #chatModal .chat-bubble.is-system .chat-bubble-text,
  body.is-chat-rtl #chatModal .chat-bubble.is-system .chat-bubble-text{
    display:inline !important;
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:0 !important;
    margin:0 !important;
    direction:rtl !important;
    unicode-bidi:plaintext !important;
    text-align:center !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    color:rgba(255,248,220,.76) !important;
    font-size:12px !important;
    font-style:italic !important;
    font-weight:800 !important;
    line-height:1.5 !important;
  }
  html[lang="ar"] #chatModal .chat-bubble.is-system .chat-bubble-time,
  body.is-chat-rtl #chatModal .chat-bubble.is-system .chat-bubble-time{
    display:inline-block !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
    margin:0 8px 0 0 !important;
    padding:0 !important;
    color:rgba(255,248,220,.48) !important;
    font-size:10px !important;
    line-height:1.2 !important;
    vertical-align:baseline !important;
  }

  /* Arabic typing and actions. */
  html[lang="ar"] #chatModal .chat-composer,
  body.is-chat-rtl #chatModal .chat-composer{
    direction:rtl !important;
    text-align:right !important;
    padding:12px 0 calc(env(safe-area-inset-bottom, 0px) + 2px) !important;
    margin-top:8px !important;
    border-top:1px solid rgba(255,248,220,.14) !important;
    background:transparent !important;
  }
  html[lang="ar"] #chatModal textarea#chatMessageInput.chat-message-input,
  body.is-chat-rtl #chatModal textarea#chatMessageInput.chat-message-input{
    direction:rtl !important;
    text-align:right !important;
    unicode-bidi:plaintext !important;
    width:100% !important;
    max-width:none !important;
    min-height:82px !important;
    height:82px !important;
    padding:14px 16px !important;
    line-height:1.55 !important;
    font-size:16px !important;
  }
  html[lang="ar"] #chatModal textarea#chatMessageInput.chat-message-input::placeholder,
  body.is-chat-rtl #chatModal textarea#chatMessageInput.chat-message-input::placeholder{
    direction:rtl !important;
    text-align:right !important;
  }
  html[lang="ar"] #chatModal .chat-composer-footer,
  body.is-chat-rtl #chatModal .chat-composer-footer{
    direction:rtl !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:10px !important;
    padding-top:8px !important;
  }
  html[lang="ar"] #chatModal .chat-composer-helper-row,
  body.is-chat-rtl #chatModal .chat-composer-helper-row{
    direction:rtl !important;
    justify-content:flex-start !important;
    text-align:right !important;
  }
  html[lang="ar"] #chatModal .chat-modal-actions,
  body.is-chat-rtl #chatModal .chat-modal-actions{
    direction:rtl !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
    gap:8px !important;
    width:100% !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    margin:0 !important;
    padding:0 !important;
  }
  html[lang="ar"] #chatModal .chat-modal-actions .btn,
  body.is-chat-rtl #chatModal .chat-modal-actions .btn{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:46px !important;
    padding:0 12px !important;
    border-radius:16px !important;
    text-align:center !important;
    white-space:normal !important;
    line-height:1.25 !important;
    overflow-wrap:anywhere !important;
  }
  html[lang="ar"] #chatModal #chatBackToStartBtn,
  html[lang="ar"] #chatModal #sendChatMessageBtn,
  body.is-chat-rtl #chatModal #chatBackToStartBtn,
  body.is-chat-rtl #chatModal #sendChatMessageBtn{
    direction:rtl !important;
    unicode-bidi:plaintext !important;
    margin:0 !important;
  }
}

/* ============================================================
   v363: Arabic phone-only participant heading removal
   Scope: Arabic + phone only. Hides the large "people in room" heading on
   the mobile Arabic chat so only the compact participant chips remain.
   Desktop and other languages are intentionally untouched.
   ============================================================ */
@media (max-width: 760px){
  html[lang="ar"] #chatModal .chat-sidebar-head.chat-sidebar-head-minimal,
  body.is-chat-rtl #chatModal .chat-sidebar-head.chat-sidebar-head-minimal{
    display:none !important;
  }

  html[lang="ar"] #chatModal .chat-sidebar.chat-sidebar-minimal,
  body.is-chat-rtl #chatModal .chat-sidebar.chat-sidebar-minimal{
    padding-top:0 !important;
  }

  html[lang="ar"] #chatModal .chat-mini-list.chat-mini-list-minimal,
  html[lang="ar"] #chatModal #chatUsersList.chat-mini-list,
  body.is-chat-rtl #chatModal .chat-mini-list.chat-mini-list-minimal,
  body.is-chat-rtl #chatModal #chatUsersList.chat-mini-list{
    padding-top:0 !important;
  }
}

/* ============================================================
   v364: Arabic phone-only one-line Free chat title
   Scope: Arabic + phone only. Keeps the chat header text as
   "OK Safe Space Free chat" on a single row without touching
   desktop or other languages.
   ============================================================ */
@media (max-width: 760px){
  html[lang="ar"] #chatModal .chat-modal-head,
  body.is-chat-rtl #chatModal .chat-modal-head{
    direction:ltr !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:10px !important;
  }

  html[lang="ar"] #chatModal .chat-head-actions,
  body.is-chat-rtl #chatModal .chat-head-actions{
    order:1 !important;
    flex:0 0 auto !important;
    min-width:0 !important;
    margin:0 !important;
  }

  html[lang="ar"] #chatModal .chat-modal-titlewrap,
  body.is-chat-rtl #chatModal .chat-modal-titlewrap{
    order:2 !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    overflow:hidden !important;
    direction:ltr !important;
    text-align:right !important;
  }

  html[lang="ar"] #chatModal .chat-modal-titleline,
  body.is-chat-rtl #chatModal .chat-modal-titleline{
    direction:ltr !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:baseline !important;
    justify-content:flex-end !important;
    gap:7px !important;
    width:100% !important;
    max-width:100% !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-align:right !important;
  }

  html[lang="ar"] #chatModal .chat-modal-titleline::after,
  body.is-chat-rtl #chatModal .chat-modal-titleline::after{
    content:none !important;
    display:none !important;
  }

  html[lang="ar"] #chatModal .chat-modal-head .modal-kicker,
  body.is-chat-rtl #chatModal .chat-modal-head .modal-kicker{
    order:1 !important;
    flex:0 1 auto !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    font-size:clamp(13px, 3.7vw, 17px) !important;
    line-height:1.08 !important;
  }

  html[lang="ar"] #chatModal #chatModalTitle,
  body.is-chat-rtl #chatModal #chatModalTitle{
    order:2 !important;
    flex:0 0 auto !important;
    min-width:0 !important;
    margin:0 !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
    white-space:nowrap !important;
    font-size:clamp(18px, 5vw, 22px) !important;
    line-height:1.08 !important;
  }
}

/* ============================================================
   v365: Arabic phone-only composer height and cream send button
   Scope: Arabic + phone only. Makes the message input more compact
   and gives the send-message button a cream filled background.
   Desktop and other languages are intentionally untouched.
   ============================================================ */
@media (max-width: 760px){
  html[lang="ar"] #chatModal .chat-composer,
  body.is-chat-rtl #chatModal .chat-composer,
  body.is-arabic-mobile-chat-fix #chatModal .chat-composer{
    padding-top:10px !important;
    margin-top:6px !important;
  }

  html[lang="ar"] #chatModal textarea#chatMessageInput.chat-message-input,
  body.is-chat-rtl #chatModal textarea#chatMessageInput.chat-message-input,
  body.is-arabic-mobile-chat-fix #chatModal textarea#chatMessageInput.chat-message-input,
  body.is-arabic-mobile-chat-fix #chatModal #chatMessageInput{
    min-height:60px !important;
    height:60px !important;
    max-height:60px !important;
    padding:9px 14px !important;
    line-height:1.35 !important;
    font-size:16px !important;
    resize:none !important;
  }

  html[lang="ar"] #chatModal .chat-composer-footer,
  body.is-chat-rtl #chatModal .chat-composer-footer,
  body.is-arabic-mobile-chat-fix #chatModal .chat-composer-footer{
    gap:8px !important;
    padding-top:8px !important;
  }

  html[lang="ar"] #chatModal button#sendChatMessageBtn.chat-send-primary,
  html[lang="ar"] #chatModal button#sendChatMessageBtn.chat-send-primary:hover,
  html[lang="ar"] #chatModal button#sendChatMessageBtn.chat-send-primary:focus,
  html[lang="ar"] #chatModal button#sendChatMessageBtn.chat-send-primary:active,
  html[lang="ar"] #chatModal button#sendChatMessageBtn.btn.primary.chat-send-primary,
  html[lang="ar"] #chatModal button#sendChatMessageBtn.btn.primary.chat-send-primary:hover,
  html[lang="ar"] #chatModal button#sendChatMessageBtn.btn.primary.chat-send-primary:focus,
  html[lang="ar"] #chatModal button#sendChatMessageBtn.btn.primary.chat-send-primary:active,
  body.is-chat-rtl #chatModal button#sendChatMessageBtn.chat-send-primary,
  body.is-chat-rtl #chatModal button#sendChatMessageBtn.chat-send-primary:hover,
  body.is-chat-rtl #chatModal button#sendChatMessageBtn.chat-send-primary:focus,
  body.is-chat-rtl #chatModal button#sendChatMessageBtn.chat-send-primary:active,
  body.is-chat-rtl #chatModal button#sendChatMessageBtn.btn.primary.chat-send-primary,
  body.is-chat-rtl #chatModal button#sendChatMessageBtn.btn.primary.chat-send-primary:hover,
  body.is-chat-rtl #chatModal button#sendChatMessageBtn.btn.primary.chat-send-primary:focus,
  body.is-chat-rtl #chatModal button#sendChatMessageBtn.btn.primary.chat-send-primary:active,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.chat-send-primary,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.chat-send-primary:hover,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.chat-send-primary:focus,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.chat-send-primary:active,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.btn.primary.chat-send-primary,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.btn.primary.chat-send-primary:hover,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.btn.primary.chat-send-primary:focus,
  body.is-arabic-mobile-chat-fix #chatModal button#sendChatMessageBtn.btn.primary.chat-send-primary:active{
    appearance:none !important;
    -webkit-appearance:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    min-height:46px !important;
    height:auto !important;
    margin:0 !important;
    padding:0 14px !important;
    border-radius:16px !important;
    background:#fff8dc !important;
    background-color:#fff8dc !important;
    background-image:none !important;
    border:1px solid rgba(255,248,220,.92) !important;
    box-shadow:0 8px 18px rgba(0,0,0,.18) !important;
    color:#173c35 !important;
    font-weight:900 !important;
    line-height:1.25 !important;
    text-align:center !important;
    text-decoration:none !important;
    text-underline-offset:0 !important;
    text-shadow:none !important;
  }
}

/* ============================================================
   v366: Arabic phone-only composer textarea 72px rounded rectangle
   Scope: Arabic + phone only. Sets the mobile Arabic message input
   to 72px tall and gives it a rounded-rectangle shape.
   Desktop and other languages are intentionally untouched.
   ============================================================ */
@media (max-width: 760px){
  html[lang="ar"] #chatModal textarea#chatMessageInput.chat-message-input,
  body.is-chat-rtl #chatModal textarea#chatMessageInput.chat-message-input,
  body.is-arabic-mobile-chat-fix #chatModal textarea#chatMessageInput.chat-message-input,
  body.is-arabic-mobile-chat-fix #chatModal #chatMessageInput{
    min-height:72px !important;
    height:72px !important;
    max-height:72px !important;
    border-radius:14px !important;
    padding:10px 14px !important;
    box-sizing:border-box !important;
  }
}


/* ============================================================
   v367: Arabic phone-only readable conversation layout
   Scope: Arabic + phone only. Prevents message overlap by turning the
   conversation lane into clean stacked rows with compact readable bubbles.
   Desktop and other languages are intentionally untouched.
   ============================================================ */
@media (max-width: 760px){
  html[lang="ar"] #chatModal .chat-message-list,
  html[lang="ar"] #chatModal #chatMessages,
  body.is-chat-rtl #chatModal .chat-message-list,
  body.is-chat-rtl #chatModal #chatMessages,
  body.is-arabic-mobile-chat-fix #chatModal .chat-message-list,
  body.is-arabic-mobile-chat-fix #chatModal #chatMessages{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:0 !important;
    padding:14px 0 10px !important;
    overflow:auto !important;
    overflow-x:hidden !important;
  }

  html[lang="ar"] #chatModal .chat-message-list .chat-bubble,
  html[lang="ar"] #chatModal #chatMessages .chat-bubble,
  body.is-chat-rtl #chatModal .chat-message-list .chat-bubble,
  body.is-chat-rtl #chatModal #chatMessages .chat-bubble,
  body.is-arabic-mobile-chat-fix #chatModal .chat-message-list .chat-bubble,
  body.is-arabic-mobile-chat-fix #chatModal #chatMessages .chat-bubble{
    position:static !important;
    display:flex !important;
    flex-direction:column !important;
    align-self:stretch !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    clear:both !important;
    float:none !important;
    margin:0 0 14px !important;
    padding:0 !important;
    transform:none !important;
    background:none !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
    isolation:isolate !important;
  }

  html[lang="ar"] #chatModal .chat-message-list .chat-bubble::before,
  html[lang="ar"] #chatModal .chat-message-list .chat-bubble::after,
  html[lang="ar"] #chatModal #chatMessages .chat-bubble::before,
  html[lang="ar"] #chatModal #chatMessages .chat-bubble::after,
  body.is-chat-rtl #chatModal .chat-message-list .chat-bubble::before,
  body.is-chat-rtl #chatModal .chat-message-list .chat-bubble::after,
  body.is-chat-rtl #chatModal #chatMessages .chat-bubble::before,
  body.is-chat-rtl #chatModal #chatMessages .chat-bubble::after,
  body.is-arabic-mobile-chat-fix #chatModal .chat-message-list .chat-bubble::before,
  body.is-arabic-mobile-chat-fix #chatModal .chat-message-list .chat-bubble::after,
  body.is-arabic-mobile-chat-fix #chatModal #chatMessages .chat-bubble::before,
  body.is-arabic-mobile-chat-fix #chatModal #chatMessages .chat-bubble::after{
    content:none !important;
    display:none !important;
  }

  html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-content,
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-content,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble:not(.is-system) .chat-bubble-content{
    position:static !important;
    display:flex !important;
    flex-direction:column !important;
    gap:5px !important;
    width:auto !important;
    min-width:0 !important;
    max-width:min(82vw, 360px) !important;
    padding:10px 12px !important;
    margin:0 !important;
    border:1px solid rgba(255,248,220,.16) !important;
    border-radius:16px !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  html[lang="ar"] #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-content,
  html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-content,
  body.is-chat-rtl #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-content,
  body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-content,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-content,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-content{
    align-self:flex-end !important;
    align-items:flex-end !important;
    text-align:right !important;
    background:rgba(255,248,220,.14) !important;
  }

  html[lang="ar"] #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-content,
  html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system) .chat-bubble-content,
  html[lang="ar"] #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-content,
  body.is-chat-rtl #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-content,
  body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system) .chat-bubble-content,
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-content,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-content,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system) .chat-bubble-content,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-content{
    align-self:flex-start !important;
    align-items:flex-start !important;
    text-align:right !important;
    background:rgba(255,255,255,.08) !important;
  }

  html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-head,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble:not(.is-system) .chat-bubble-head{
    position:static !important;
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:6px !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    background:none !important;
    line-height:1.2 !important;
  }

  html[lang="ar"] #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-head,
  html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-head,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-head,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-head{
    justify-content:flex-end !important;
    direction:rtl !important;
    text-align:right !important;
  }

  html[lang="ar"] #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-head,
  html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system) .chat-bubble-head,
  html[lang="ar"] #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-head,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-head,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system) .chat-bubble-head,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-head{
    justify-content:flex-start !important;
    direction:ltr !important;
    text-align:left !important;
  }

  html[lang="ar"] #chatModal .chat-name-btn,
  html[lang="ar"] #chatModal .chat-bidi-name,
  body.is-chat-rtl #chatModal .chat-name-btn,
  body.is-chat-rtl #chatModal .chat-bidi-name,
  body.is-arabic-mobile-chat-fix #chatModal .chat-name-btn,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bidi-name{
    max-width:56vw !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    unicode-bidi:isolate !important;
  }

  html[lang="ar"] #chatModal .chat-bubble-time,
  html[lang="ar"] #chatModal .chat-bubble-time[dir="ltr"],
  body.is-chat-rtl #chatModal .chat-bubble-time,
  body.is-chat-rtl #chatModal .chat-bubble-time[dir="ltr"],
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble-time,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble-time[dir="ltr"]{
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
    font-size:11px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
    color:rgba(255,248,220,.64) !important;
  }

  html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-text,
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-text,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble:not(.is-system) .chat-bubble-text{
    position:static !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    text-align:right !important;
    direction:rtl !important;
    unicode-bidi:plaintext !important;
    white-space:pre-wrap !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    line-height:1.7 !important;
    font-size:15px !important;
    background:none !important;
    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  html[lang="ar"] #chatModal .chat-bubble.is-system,
  body.is-chat-rtl #chatModal .chat-bubble.is-system,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-system{
    position:static !important;
    display:block !important;
    width:100% !important;
    margin:2px 0 12px !important;
    padding:0 !important;
    text-align:center !important;
    background:none !important;
    border:none !important;
    box-shadow:none !important;
  }

  html[lang="ar"] #chatModal .chat-bubble.is-system .chat-bubble-content,
  body.is-chat-rtl #chatModal .chat-bubble.is-system .chat-bubble-content,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-system .chat-bubble-content{
    display:inline-flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:6px !important;
    width:auto !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:0 !important;
    background:none !important;
    border:none !important;
  }

  html[lang="ar"] #chatModal .chat-bubble.is-system .chat-bubble-text,
  body.is-chat-rtl #chatModal .chat-bubble.is-system .chat-bubble-text,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-system .chat-bubble-text{
    display:inline !important;
    margin:0 !important;
    padding:0 !important;
    direction:rtl !important;
    text-align:center !important;
    font-size:12px !important;
    line-height:1.5 !important;
    color:rgba(255,248,220,.78) !important;
    font-style:italic !important;
    background:none !important;
    border:none !important;
  }

  html[lang="ar"] #chatModal .chat-bubble.is-system .chat-bubble-time,
  body.is-chat-rtl #chatModal .chat-bubble.is-system .chat-bubble-time,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-system .chat-bubble-time{
    display:inline !important;
    margin:0 !important;
    padding:0 !important;
    font-size:10px !important;
    color:rgba(255,248,220,.48) !important;
  }
}


/* ============================================================
   v368: Arabic phone-only conversation renderer parity
   Scope: Arabic + phone only. Uses dedicated simple message markup so
   conversation rows stack cleanly without overlap, like other languages.
   Desktop and other languages are intentionally untouched.
   ============================================================ */
@media (max-width: 760px){
  html[lang="ar"] #chatModal .ar-mobile-chat-row,
  body.is-chat-rtl #chatModal .ar-mobile-chat-row,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-row{
    position:static !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 0 14px !important;
    padding:0 !important;
    clear:both !important;
    float:none !important;
    transform:none !important;
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-row::before,
  html[lang="ar"] #chatModal .ar-mobile-chat-row::after,
  body.is-chat-rtl #chatModal .ar-mobile-chat-row::before,
  body.is-chat-rtl #chatModal .ar-mobile-chat-row::after,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-row::before,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-row::after{
    content:none !important;
    display:none !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-card,
  body.is-chat-rtl #chatModal .ar-mobile-chat-card,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-card{
    position:static !important;
    display:flex !important;
    flex-direction:column !important;
    gap:5px !important;
    width:fit-content !important;
    max-width:min(82vw, 360px) !important;
    min-width:min(38vw, 150px) !important;
    padding:10px 12px !important;
    border-radius:16px !important;
    border:1px solid rgba(255,248,220,.16) !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-card.is-self,
  body.is-chat-rtl #chatModal .ar-mobile-chat-card.is-self,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-card.is-self{
    margin-inline-start:auto !important;
    margin-inline-end:0 !important;
    align-items:flex-end !important;
    background:rgba(255,248,220,.14) !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-card.is-other,
  body.is-chat-rtl #chatModal .ar-mobile-chat-card.is-other,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-card.is-other{
    margin-inline-start:0 !important;
    margin-inline-end:auto !important;
    align-items:flex-start !important;
    background:rgba(255,255,255,.08) !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-meta,
  body.is-chat-rtl #chatModal .ar-mobile-chat-meta,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-meta{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:6px !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1.2 !important;
    background:none !important;
    border:none !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-meta.is-self,
  body.is-chat-rtl #chatModal .ar-mobile-chat-meta.is-self,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-meta.is-self{
    justify-content:flex-end !important;
    direction:rtl !important;
    text-align:right !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-meta.is-other,
  body.is-chat-rtl #chatModal .ar-mobile-chat-meta.is-other,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-meta.is-other{
    justify-content:flex-start !important;
    direction:ltr !important;
    text-align:left !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-name,
  html[lang="ar"] #chatModal .ar-mobile-chat-name .chat-bidi-name,
  body.is-chat-rtl #chatModal .ar-mobile-chat-name,
  body.is-chat-rtl #chatModal .ar-mobile-chat-name .chat-bidi-name,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-name,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-name .chat-bidi-name{
    direction:auto !important;
    unicode-bidi:isolate !important;
    max-width:54vw !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    color:#ffe87a !important;
    font-size:13px !important;
    font-weight:800 !important;
    background:none !important;
    border:none !important;
    padding:0 !important;
    margin:0 !important;
    text-shadow:none !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-time,
  body.is-chat-rtl #chatModal .ar-mobile-chat-time,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-time{
    flex:0 0 auto !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
    white-space:nowrap !important;
    margin:0 !important;
    padding:0 !important;
    color:rgba(255,248,220,.62) !important;
    font-size:11px !important;
    line-height:1.2 !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-text,
  body.is-chat-rtl #chatModal .ar-mobile-chat-text,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-text{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    background:none !important;
    box-shadow:none !important;
    text-align:right !important;
    unicode-bidi:plaintext !important;
    white-space:pre-wrap !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    line-height:1.7 !important;
    font-size:15px !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-card.is-self .ar-mobile-chat-text,
  body.is-chat-rtl #chatModal .ar-mobile-chat-card.is-self .ar-mobile-chat-text,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-card.is-self .ar-mobile-chat-text{
    color:#fffdf2 !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-card.is-other .ar-mobile-chat-text,
  body.is-chat-rtl #chatModal .ar-mobile-chat-card.is-other .ar-mobile-chat-text,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-card.is-other .ar-mobile-chat-text{
    color:#ffe87a !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-system,
  body.is-chat-rtl #chatModal .ar-mobile-chat-system,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-system{
    text-align:center !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-system-line,
  body.is-chat-rtl #chatModal .ar-mobile-chat-system-line,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-system-line{
    display:inline-flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:0 !important;
    background:none !important;
    border:none !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-system-text,
  body.is-chat-rtl #chatModal .ar-mobile-chat-system-text,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-system-text{
    display:inline !important;
    direction:rtl !important;
    unicode-bidi:plaintext !important;
    text-align:center !important;
    color:rgba(255,248,220,.78) !important;
    font-size:12px !important;
    line-height:1.5 !important;
    font-style:italic !important;
    font-weight:800 !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-system-time,
  body.is-chat-rtl #chatModal .ar-mobile-chat-system-time,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-system-time{
    display:inline !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
    color:rgba(255,248,220,.48) !important;
    font-size:10px !important;
    line-height:1.2 !important;
  }
}


/* ============================================================
   v369: Arabic phone-only text-only message frame
   Scope: Arabic + phone only. The visual frame now wraps only the
   conversation text, while sender name and time stay outside the frame.
   Desktop and other languages are intentionally untouched.
   ============================================================ */
@media (max-width: 760px){
  html[lang="ar"] #chatModal .ar-mobile-chat-card,
  body.is-chat-rtl #chatModal .ar-mobile-chat-card,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-card{
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:none !important;
    background-color:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    gap:4px !important;
    min-width:0 !important;
    max-width:min(82vw, 360px) !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-card.is-self,
  body.is-chat-rtl #chatModal .ar-mobile-chat-card.is-self,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-card.is-self,
  html[lang="ar"] #chatModal .ar-mobile-chat-card.is-other,
  body.is-chat-rtl #chatModal .ar-mobile-chat-card.is-other,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-card.is-other{
    background:none !important;
    background-color:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-meta,
  body.is-chat-rtl #chatModal .ar-mobile-chat-meta,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-meta{
    padding:0 2px !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-text,
  body.is-chat-rtl #chatModal .ar-mobile-chat-text,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-text{
    display:block !important;
    width:fit-content !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:9px 12px !important;
    border:1px solid rgba(255,248,220,.16) !important;
    border-radius:16px !important;
    box-shadow:none !important;
    text-align:right !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-card.is-self .ar-mobile-chat-text,
  body.is-chat-rtl #chatModal .ar-mobile-chat-card.is-self .ar-mobile-chat-text,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-card.is-self .ar-mobile-chat-text{
    background:rgba(255,248,220,.14) !important;
    background-color:rgba(255,248,220,.14) !important;
    border-color:rgba(255,248,220,.20) !important;
    align-self:flex-end !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-card.is-other .ar-mobile-chat-text,
  body.is-chat-rtl #chatModal .ar-mobile-chat-card.is-other .ar-mobile-chat-text,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-card.is-other .ar-mobile-chat-text{
    background:rgba(255,255,255,.08) !important;
    background-color:rgba(255,255,255,.08) !important;
    border-color:rgba(255,248,220,.16) !important;
    align-self:flex-start !important;
  }
}


/* ============================================================
   v370: Arabic phone-only stacked conversation flow
   Scope: Arabic + phone only. Mirrors the stable chat behavior used by
   other phone languages: every message is one normal block in document flow.
   This prevents left/right bubbles and system messages from sharing a row.
   Desktop and other languages are intentionally untouched.
   ============================================================ */
@media (max-width: 760px){
  html[lang="ar"] #chatModal #chatMessages,
  html[lang="ar"] #chatModal .chat-message-list,
  body.is-chat-rtl #chatModal #chatMessages,
  body.is-chat-rtl #chatModal .chat-message-list,
  body.is-arabic-mobile-chat-fix #chatModal #chatMessages,
  body.is-arabic-mobile-chat-fix #chatModal .chat-message-list{
    display:block !important;
    direction:ltr !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:14px 0 12px !important;
    margin:0 !important;
    box-sizing:border-box !important;
    contain:none !important;
  }

  /* Each item must own a full line, just like other mobile languages. */
  html[lang="ar"] #chatModal #chatMessages > .chat-bubble,
  html[lang="ar"] #chatModal .chat-message-list > .chat-bubble,
  body.is-chat-rtl #chatModal #chatMessages > .chat-bubble,
  body.is-chat-rtl #chatModal .chat-message-list > .chat-bubble,
  body.is-arabic-mobile-chat-fix #chatModal #chatMessages > .chat-bubble,
  body.is-arabic-mobile-chat-fix #chatModal .chat-message-list > .chat-bubble{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    clear:both !important;
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 0 16px !important;
    padding:0 !important;
    overflow:visible !important;
    transform:none !important;
    background:none !important;
    background-color:transparent !important;
    background-image:none !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    outline:0 !important;
    z-index:auto !important;
    isolation:isolate !important;
  }

  html[lang="ar"] #chatModal #chatMessages > .chat-bubble::before,
  html[lang="ar"] #chatModal #chatMessages > .chat-bubble::after,
  html[lang="ar"] #chatModal .chat-message-list > .chat-bubble::before,
  html[lang="ar"] #chatModal .chat-message-list > .chat-bubble::after,
  body.is-chat-rtl #chatModal #chatMessages > .chat-bubble::before,
  body.is-chat-rtl #chatModal #chatMessages > .chat-bubble::after,
  body.is-chat-rtl #chatModal .chat-message-list > .chat-bubble::before,
  body.is-chat-rtl #chatModal .chat-message-list > .chat-bubble::after,
  body.is-arabic-mobile-chat-fix #chatModal #chatMessages > .chat-bubble::before,
  body.is-arabic-mobile-chat-fix #chatModal #chatMessages > .chat-bubble::after,
  body.is-arabic-mobile-chat-fix #chatModal .chat-message-list > .chat-bubble::before,
  body.is-arabic-mobile-chat-fix #chatModal .chat-message-list > .chat-bubble::after{
    content:none !important;
    display:none !important;
  }

  /* Works with the new Arabic renderer and with the older generic renderer. */
  html[lang="ar"] #chatModal .ar-mobile-chat-card,
  html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-content,
  body.is-chat-rtl #chatModal .ar-mobile-chat-card,
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-content,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-card,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble:not(.is-system) .chat-bubble-content{
    position:relative !important;
    display:block !important;
    float:none !important;
    clear:both !important;
    width:max-content !important;
    min-width:0 !important;
    max-width:min(78vw, 360px) !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    transform:none !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    z-index:auto !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-card.is-self,
  html[lang="ar"] #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-content,
  html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-content,
  body.is-chat-rtl #chatModal .ar-mobile-chat-card.is-self,
  body.is-chat-rtl #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-content,
  body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-content,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-card.is-self,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-content,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-content{
    margin-left:auto !important;
    margin-right:0 !important;
    text-align:right !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-card.is-other,
  html[lang="ar"] #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-content,
  html[lang="ar"] #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-content,
  body.is-chat-rtl #chatModal .ar-mobile-chat-card.is-other,
  body.is-chat-rtl #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-content,
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-content,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-card.is-other,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-content,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-content{
    margin-left:0 !important;
    margin-right:auto !important;
    text-align:left !important;
  }

  /* Name + time remain outside the message frame, but still reserve height. */
  html[lang="ar"] #chatModal .ar-mobile-chat-meta,
  html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .ar-mobile-chat-meta,
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-head,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-meta,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble:not(.is-system) .chat-bubble-head{
    position:relative !important;
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:6px !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:14px !important;
    margin:0 0 4px !important;
    padding:0 2px !important;
    overflow:visible !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    line-height:1.25 !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-meta.is-self,
  html[lang="ar"] #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-head,
  html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .ar-mobile-chat-meta.is-self,
  body.is-chat-rtl #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-head,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-meta.is-self,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-head,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-head{
    justify-content:flex-end !important;
    direction:rtl !important;
    text-align:right !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-meta.is-other,
  html[lang="ar"] #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-head,
  html[lang="ar"] #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .ar-mobile-chat-meta.is-other,
  body.is-chat-rtl #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-head,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-meta.is-other,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-head,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-head{
    justify-content:flex-start !important;
    direction:ltr !important;
    text-align:left !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-name,
  html[lang="ar"] #chatModal .chat-name-btn,
  html[lang="ar"] #chatModal .chat-bidi-name,
  body.is-chat-rtl #chatModal .ar-mobile-chat-name,
  body.is-chat-rtl #chatModal .chat-name-btn,
  body.is-chat-rtl #chatModal .chat-bidi-name,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-name,
  body.is-arabic-mobile-chat-fix #chatModal .chat-name-btn,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bidi-name{
    position:static !important;
    display:inline-block !important;
    max-width:54vw !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    direction:auto !important;
    unicode-bidi:isolate !important;
    margin:0 !important;
    padding:0 !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    color:#ffe87a !important;
    font-size:13px !important;
    font-weight:900 !important;
    line-height:1.2 !important;
    text-shadow:none !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-time,
  html[lang="ar"] #chatModal .chat-bubble-time,
  html[lang="ar"] #chatModal .chat-bubble-time[dir="ltr"],
  body.is-chat-rtl #chatModal .ar-mobile-chat-time,
  body.is-chat-rtl #chatModal .chat-bubble-time,
  body.is-chat-rtl #chatModal .chat-bubble-time[dir="ltr"],
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-time,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble-time,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble-time[dir="ltr"]{
    position:static !important;
    display:inline-block !important;
    flex:0 0 auto !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
    white-space:nowrap !important;
    margin:0 !important;
    padding:0 !important;
    color:rgba(255,248,220,.62) !important;
    font-size:11px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    text-shadow:none !important;
  }

  /* Only the conversation text receives the rounded frame. */
  html[lang="ar"] #chatModal .ar-mobile-chat-text,
  html[lang="ar"] #chatModal .chat-bubble:not(.is-system) .chat-bubble-text,
  body.is-chat-rtl #chatModal .ar-mobile-chat-text,
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-system) .chat-bubble-text,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-text,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble:not(.is-system) .chat-bubble-text{
    position:relative !important;
    display:block !important;
    clear:both !important;
    float:none !important;
    width:fit-content !important;
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:0 !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:9px 12px !important;
    overflow:visible !important;
    transform:none !important;
    border:1px solid rgba(255,248,220,.16) !important;
    border-radius:16px !important;
    box-shadow:none !important;
    text-align:right !important;
    unicode-bidi:plaintext !important;
    white-space:pre-wrap !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    line-height:1.7 !important;
    font-size:15px !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-card.is-self .ar-mobile-chat-text,
  html[lang="ar"] #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-text,
  html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-text,
  body.is-chat-rtl #chatModal .ar-mobile-chat-card.is-self .ar-mobile-chat-text,
  body.is-chat-rtl #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-text,
  body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-text,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-card.is-self .ar-mobile-chat-text,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-text,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-text{
    margin-left:auto !important;
    margin-right:0 !important;
    align-self:flex-end !important;
    background:rgba(255,248,220,.14) !important;
    border-color:rgba(255,248,220,.20) !important;
    color:#fffdf2 !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-card.is-other .ar-mobile-chat-text,
  html[lang="ar"] #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-text,
  html[lang="ar"] #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-text,
  body.is-chat-rtl #chatModal .ar-mobile-chat-card.is-other .ar-mobile-chat-text,
  body.is-chat-rtl #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-text,
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-text,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-card.is-other .ar-mobile-chat-text,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-text,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-text{
    margin-left:0 !important;
    margin-right:auto !important;
    align-self:flex-start !important;
    background:rgba(255,255,255,.08) !important;
    border-color:rgba(255,248,220,.16) !important;
    color:#ffe87a !important;
  }

  /* System events are their own full-width rows, never beside a chat bubble. */
  html[lang="ar"] #chatModal .chat-bubble.is-system,
  html[lang="ar"] #chatModal .ar-mobile-chat-system,
  body.is-chat-rtl #chatModal .chat-bubble.is-system,
  body.is-chat-rtl #chatModal .ar-mobile-chat-system,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-system,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-system{
    display:block !important;
    clear:both !important;
    width:100% !important;
    max-width:100% !important;
    margin:4px 0 14px !important;
    padding:0 !important;
    text-align:center !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-system-line,
  html[lang="ar"] #chatModal .chat-bubble.is-system .chat-bubble-content,
  body.is-chat-rtl #chatModal .ar-mobile-chat-system-line,
  body.is-chat-rtl #chatModal .chat-bubble.is-system .chat-bubble-content,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-system-line,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-system .chat-bubble-content{
    position:relative !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:0 !important;
    text-align:center !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    direction:rtl !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-system-text,
  html[lang="ar"] #chatModal .chat-bubble.is-system .chat-bubble-text,
  body.is-chat-rtl #chatModal .ar-mobile-chat-system-text,
  body.is-chat-rtl #chatModal .chat-bubble.is-system .chat-bubble-text,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-system-text,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-system .chat-bubble-text{
    display:inline !important;
    width:auto !important;
    max-width:100% !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:none !important;
    box-shadow:none !important;
    color:rgba(255,248,220,.78) !important;
    font-size:12px !important;
    font-style:italic !important;
    font-weight:800 !important;
    line-height:1.55 !important;
    text-align:center !important;
    direction:rtl !important;
    unicode-bidi:plaintext !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-system-time,
  html[lang="ar"] #chatModal .chat-bubble.is-system .chat-bubble-time,
  body.is-chat-rtl #chatModal .ar-mobile-chat-system-time,
  body.is-chat-rtl #chatModal .chat-bubble.is-system .chat-bubble-time,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-system-time,
  body.is-arabic-mobile-chat-fix #chatModal .chat-bubble.is-system .chat-bubble-time{
    display:inline !important;
    margin-inline-start:6px !important;
    color:rgba(255,248,220,.48) !important;
    font-size:10px !important;
    line-height:1.2 !important;
    direction:ltr !important;
    unicode-bidi:isolate !important;
  }
}


/* ============================================================
   v369: Arabic desktop/tablet chat name alignment only
   Scope: Arabic + desktop/tablet only. Keeps the message-owner name locked
   to the right and other-user names locked to the left, without changing
   any other chat behavior.
   ============================================================ */
@media (min-width: 761px){
  html[lang="ar"] #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-head,
  html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .chat-bubble.is-self:not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-bubble-head{
    width:100% !important;
    justify-content:flex-end !important;
    align-self:flex-end !important;
    direction:rtl !important;
    text-align:right !important;
  }

  html[lang="ar"] #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-head,
  html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system) .chat-bubble-head,
  html[lang="ar"] #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .chat-bubble.is-other:not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system) .chat-bubble-head,
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-bubble-head{
    width:100% !important;
    justify-content:flex-start !important;
    align-self:flex-start !important;
    direction:ltr !important;
    text-align:left !important;
  }

  html[lang="ar"] #chatModal .chat-bubble.is-self:not(.is-system) .chat-name-btn,
  html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-name-btn,
  body.is-chat-rtl #chatModal .chat-bubble.is-self:not(.is-system) .chat-name-btn,
  body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="self"]:not(.is-system) .chat-name-btn{
    margin-inline-start:auto !important;
    margin-inline-end:0 !important;
    text-align:right !important;
    color:#fffdf2 !important;
  }

  html[lang="ar"] #chatModal .chat-bubble.is-other:not(.is-system) .chat-name-btn,
  html[lang="ar"] #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system) .chat-name-btn,
  html[lang="ar"] #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-name-btn,
  body.is-chat-rtl #chatModal .chat-bubble.is-other:not(.is-system) .chat-name-btn,
  body.is-chat-rtl #chatModal .chat-bubble[data-chat-owner="other"]:not(.is-system) .chat-name-btn,
  body.is-chat-rtl #chatModal .chat-bubble:not(.is-self):not(.is-system) .chat-name-btn{
    margin-inline-start:0 !important;
    margin-inline-end:auto !important;
    text-align:left !important;
    color:#ffe87a !important;
  }
}


/* ============================================================
   v372: Arabic mobile owner-name hard alignment
   Scope: Arabic + phone only. If a message row is marked as self/owner,
   force the name line to the right; otherwise force it left.
   ============================================================ */
@media (max-width:760px){
  html[lang="ar"] #chatModal .ar-mobile-chat-row[data-chat-owner="self"] .ar-mobile-chat-meta,
  body.is-chat-rtl #chatModal .ar-mobile-chat-row[data-chat-owner="self"] .ar-mobile-chat-meta,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-row[data-chat-owner="self"] .ar-mobile-chat-meta{
    justify-content:flex-end !important;
    direction:rtl !important;
    text-align:right !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-row[data-chat-owner="self"] .ar-mobile-chat-name,
  body.is-chat-rtl #chatModal .ar-mobile-chat-row[data-chat-owner="self"] .ar-mobile-chat-name,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-row[data-chat-owner="self"] .ar-mobile-chat-name{
    margin-inline-start:auto !important;
    margin-inline-end:0 !important;
    text-align:right !important;
  }

  html[lang="ar"] #chatModal .ar-mobile-chat-row[data-chat-owner="other"] .ar-mobile-chat-name,
  body.is-chat-rtl #chatModal .ar-mobile-chat-row[data-chat-owner="other"] .ar-mobile-chat-name,
  body.is-arabic-mobile-chat-fix #chatModal .ar-mobile-chat-row[data-chat-owner="other"] .ar-mobile-chat-name{
    margin-inline-start:0 !important;
    margin-inline-end:auto !important;
    text-align:left !important;
  }
}


/* ============================================================
   v373: Arabic desktop popup visible vertical divider
   Scope: Arabic + desktop/tablet only. Restore the separator line
   between the right people panel and the main chat area.
   ============================================================ */
@media (min-width:761px){
  html[lang="ar"] #chatModal .chat-sidebar.chat-sidebar-minimal,
  html[lang="ar"] #chatModal #chatPeoplePanel.chat-people-panel,
  body.is-chat-rtl #chatModal .chat-sidebar.chat-sidebar-minimal,
  body.is-chat-rtl #chatModal #chatPeoplePanel.chat-people-panel{
    border-right:none !important;
    border-left:1px solid rgba(255,248,220,.24) !important;
    box-shadow:inset 1px 0 0 rgba(255,248,220,.24) !important;
    align-self:stretch !important;
  }
}


/* ============================================================
   v374: Arabic desktop single vertical divider only
   Scope: Arabic + desktop/tablet only. Keep a single divider between
   the chat area and people panel, and remove the extra right-side line.
   ============================================================ */
@media (min-width:761px){
  html[lang="ar"] #chatModal .chat-sidebar.chat-sidebar-minimal,
  body.is-chat-rtl #chatModal .chat-sidebar.chat-sidebar-minimal{
    border-right:none !important;
    border-left:1px solid rgba(255,248,220,.24) !important;
    box-shadow:none !important;
    align-self:stretch !important;
  }

  html[lang="ar"] #chatModal #chatPeoplePanel.chat-people-panel,
  body.is-chat-rtl #chatModal #chatPeoplePanel.chat-people-panel{
    border-left:none !important;
    border-right:none !important;
    box-shadow:none !important;
  }
}


/* ============================================================
   v375: Arabic mobile popup chat swap close/minimize buttons
   Scope: Arabic + phone only. Swap the X and minimize button positions.
   ============================================================ */
@media (max-width:760px){
  html[lang="ar"] #chatModal .chat-head-actions,
  body.is-chat-rtl #chatModal .chat-head-actions,
  body.is-arabic-mobile-chat-fix #chatModal .chat-head-actions{
    display:flex !important;
    flex-direction:row-reverse !important;
    align-items:center !important;
    gap:8px !important;
  }

  html[lang="ar"] #chatModal #closeChatModalBtn,
  html[lang="ar"] #chatModal .icon-close,
  body.is-chat-rtl #chatModal #closeChatModalBtn,
  body.is-chat-rtl #chatModal .icon-close,
  body.is-arabic-mobile-chat-fix #chatModal #closeChatModalBtn,
  body.is-arabic-mobile-chat-fix #chatModal .icon-close{
    order:1 !important;
    margin:0 !important;
  }

  html[lang="ar"] #chatModal #chatMinimizeBtn,
  html[lang="ar"] #chatModal .chat-minimize-btn,
  body.is-chat-rtl #chatModal #chatMinimizeBtn,
  body.is-chat-rtl #chatModal .chat-minimize-btn,
  body.is-arabic-mobile-chat-fix #chatModal #chatMinimizeBtn,
  body.is-arabic-mobile-chat-fix #chatModal .chat-minimize-btn{
    order:2 !important;
    margin:0 !important;
  }
}


/* ============================================================
   v376: Arabic mobile popup chat hard swap of X and minimize
   Scope: Arabic + phone only. Force X to the left and minimize to the right.
   ============================================================ */
@media (max-width:760px){
  html[lang="ar"] #chatModal .chat-head-actions,
  body.is-chat-rtl #chatModal .chat-head-actions,
  body.is-arabic-mobile-chat-fix #chatModal .chat-head-actions{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
  }

  html[lang="ar"] #chatModal #closeChatModalBtn,
  html[lang="ar"] #chatModal .icon-close,
  body.is-chat-rtl #chatModal #closeChatModalBtn,
  body.is-chat-rtl #chatModal .icon-close,
  body.is-arabic-mobile-chat-fix #chatModal #closeChatModalBtn,
  body.is-arabic-mobile-chat-fix #chatModal .icon-close{
    order:-1 !important;
    margin:0 !important;
    margin-right:0 !important;
    margin-left:0 !important;
    flex:0 0 auto !important;
  }

  html[lang="ar"] #chatModal #chatMinimizeBtn,
  html[lang="ar"] #chatModal .chat-minimize-btn,
  body.is-chat-rtl #chatModal #chatMinimizeBtn,
  body.is-chat-rtl #chatModal .chat-minimize-btn,
  body.is-arabic-mobile-chat-fix #chatModal #chatMinimizeBtn,
  body.is-arabic-mobile-chat-fix #chatModal .chat-minimize-btn{
    order:1 !important;
    margin:0 !important;
    flex:0 0 auto !important;
  }
}


/* v60 Phase 1 Step 12: additive Free chat live UI shell.
   Scoped to #chatModal and preserves existing v58/v59 layout rules. */
#chatModal[data-chat-ui-version="phase1-step12-v60"][data-chat-view="intro"] #chatWorkspaceView,
#chatModal[data-chat-ui-version="phase1-step12-v60"][data-chat-view="workspace"] #chatIntroView,
#chatModal[data-chat-ui-version="phase1-step12-v60"] #chatIntroView[hidden],
#chatModal[data-chat-ui-version="phase1-step12-v60"] #chatWorkspaceView[hidden],
#chatModal[data-chat-ui-version="phase1-step12-v60"] .chat-room-full-notice[hidden]{
  display:none !important;
}
#chatModal[data-chat-ui-version="phase1-step12-v60"] .chat-room-full-notice{
  margin-top:12px;
  border:1px solid rgba(150, 87, 52, .24);
  border-radius:18px;
  padding:11px 13px;
  background:rgba(255, 246, 230, .92);
  color:#5f3726;
  font-size:13px;
  line-height:1.55;
  font-weight:800;
  text-align:left;
}
html[lang="ar"] #chatModal[data-chat-ui-version="phase1-step12-v60"] .chat-room-full-notice,
body.is-chat-rtl #chatModal[data-chat-ui-version="phase1-step12-v60"] .chat-room-full-notice{
  direction:rtl;
  text-align:right;
}

/* v61 Phase 2 Step 4: move the Free chat private-room hint out of CSS content.
   Keep legacy pseudo-element rules in place for rollback, but disable them only
   for the v61 chat UI shell and render the localized text through #chatPrivateHint. */
#chatModal[data-chat-ui-version="phase2-step4-v61"] .chat-private-hint{
  display:none;
  order:3;
  flex:0 0 100%;
  margin-top:2px;
  color:rgba(255,248,220,.84);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:.01em;
  text-align:left;
  direction:ltr;
  unicode-bidi:isolate;
  white-space:normal;
  overflow:visible;
}
@media (max-width:760px){
  #chatModal[data-chat-ui-version="phase2-step4-v61"] .chat-modal-titlewrap{
    overflow:visible !important;
  }
  #chatModal[data-chat-ui-version="phase2-step4-v61"] .chat-modal-titleline{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    align-items:baseline !important;
    column-gap:8px !important;
    row-gap:3px !important;
    width:100% !important;
    white-space:normal !important;
    overflow:visible !important;
  }
  #chatModal[data-chat-ui-version="phase2-step4-v61"] .chat-private-hint{
    display:block !important;
  }
}
html[lang="ar"] #chatModal[data-chat-ui-version="phase2-step4-v61"] .chat-private-hint,
html[dir="rtl"] #chatModal[data-chat-ui-version="phase2-step4-v61"] .chat-private-hint,
body[dir="rtl"] #chatModal[data-chat-ui-version="phase2-step4-v61"] .chat-private-hint,
body.is-rtl #chatModal[data-chat-ui-version="phase2-step4-v61"] .chat-private-hint,
body.is-chat-rtl #chatModal[data-chat-ui-version="phase2-step4-v61"] .chat-private-hint{
  font-family:var(--font-ui-ar, system-ui, sans-serif) !important;
  text-align:right !important;
  direction:rtl !important;
  unicode-bidi:plaintext !important;
  letter-spacing:0 !important;
}
@media (min-width:761px){
  html[lang="ar"] #chatModal[data-chat-ui-version="phase2-step4-v61"] .chat-private-hint,
  html[dir="rtl"] #chatModal[data-chat-ui-version="phase2-step4-v61"] .chat-private-hint,
  body[dir="rtl"] #chatModal[data-chat-ui-version="phase2-step4-v61"] .chat-private-hint,
  body.is-rtl #chatModal[data-chat-ui-version="phase2-step4-v61"] .chat-private-hint,
  body.is-chat-rtl #chatModal[data-chat-ui-version="phase2-step4-v61"] .chat-private-hint{
    display:block !important;
  }
}


/* v109: desktop-only hero CTA cleanup — show Writing a feeling and Free chat as text links only */
@media (min-width: 981px){
  .hero-actions #openComposeBtn,
  .hero-actions #openChatBtn,
  .hero-actions .chat-launch-btn{
    min-height:auto !important;
    min-width:0 !important;
    width:auto !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    outline-offset:3px !important;
    text-shadow:none !important;
    transform:none !important;
    display:inline-flex !important;
    align-items:baseline !important;
    justify-content:flex-start !important;
    gap:0 !important;
    font-size:17px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    text-decoration-line:underline !important;
    text-decoration-thickness:2px !important;
    text-underline-offset:6px !important;
  }

  .hero-actions #openComposeBtn{
    color:#f6a9a3 !important;
    text-decoration-color:rgba(246,169,163,.76) !important;
  }

  .hero-actions #openChatBtn,
  .hero-actions .chat-launch-btn{
    color:#f7bfd8 !important;
    text-decoration-color:rgba(247,191,216,.76) !important;
  }

  .hero-actions #openComposeBtn::before,
  .hero-actions #openComposeBtn::after,
  .hero-actions #openChatBtn::before,
  .hero-actions #openChatBtn::after,
  .hero-actions .chat-launch-btn::before,
  .hero-actions .chat-launch-btn::after{
    content:none !important;
    display:none !important;
  }

  .hero-actions #openChatBtn .chat-launch-icon,
  .hero-actions .chat-launch-btn .chat-launch-icon{
    display:none !important;
  }

  .hero-actions #openComposeBtn:hover,
  .hero-actions #openChatBtn:hover,
  .hero-actions .chat-launch-btn:hover{
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    transform:none !important;
  }
}

/* v110: desktop hero link row alignment — keep Writing, language, and Free chat on one visual baseline */
@media (min-width: 981px){
  .hero > .hero-actions{
    display:flex !important;
    align-items:center !important;
    gap:24px !important;
    flex-wrap:wrap !important;
  }

  .hero-actions #openComposeBtn,
  .hero-actions .language-menu,
  .hero-actions #openChatBtn,
  .hero-actions .chat-launch-btn{
    align-self:center !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  .hero-actions .language-menu,
  .hero-actions .top-icon-menu.language-menu{
    display:inline-flex !important;
    align-items:center !important;
    min-height:0 !important;
    height:auto !important;
  }

  .hero-actions .language-menu summary,
  .hero-actions .top-icon-menu.language-menu summary{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    min-height:0 !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
    line-height:1.25 !important;
    transform:none !important;
  }

  .hero-actions .language-current-flag,
  .hero-actions .language-menu-label{
    display:inline-flex !important;
    align-items:center !important;
    line-height:1.25 !important;
  }
}


/* v115: desktop header copy cleanup. Hide the brand-title/domain text on desktop only; phone/mobile keeps its existing brand copy. */
@media (min-width: 761px){
  .header-illustration .brand-title{
    display:none !important;
  }
}

/* v116: desktop-only Write link size increase. All languages; phone/mobile untouched. */
@media (min-width: 981px){
  .hero-actions #openComposeBtn{
    font-size:24px !important;
    line-height:1.12 !important;
    font-weight:900 !important;
    text-decoration-thickness:2.5px !important;
    text-underline-offset:7px !important;
  }
}