/* Owner Dashboard → Messages (public/owner-messages.js), 2026-11-07.
   Measured from Moataz's approved design at 1536×1024 (content column 1266px beside the 270px owner sidebar); every
   size below is the reference's pixel size at that viewport. The shared owner header and sidebar come from
   owner-shell.css; this file styles only the page content. */
.om-page{
  /* The shared owner tokens (owner-shell.css :root); page-only colours below. */
  --om-nav:var(--os-header,#08243A); --om-side:var(--os-side,#071E32); --om-navy:var(--os-navy,#203D4E); --om-deep:var(--os-ink,#10283D);
  --om-gold:var(--os-gold,#C7A250); --om-gold-grad:var(--os-gold-grad,linear-gradient(135deg,#E0B755 0%,#B98412 100%));
  --om-bg:var(--os-bg,#F5F7F9); --om-card:var(--os-card,#FFFFFF); --om-text:#172536; --om-muted:var(--os-muted,#64748B); --om-border:var(--os-line,#E0E5EB);
  --om-unread:#DC2626; --om-ok:#16A34A; --om-mine:#FFF2D6; --om-guest:#F1F3F6; --om-sel:#FDF0D8;
  --om-shadow:0 4px 18px rgba(16,40,61,.07), 0 1px 3px rgba(16,40,61,.05);
  color:var(--om-text); font-family:var(--body); min-width:0; padding:0 0 24px; background:var(--om-bg);
}
.om-page *{box-sizing:border-box}
/* Names, titles and previews in another script keep their own word order but line up with the page (Arabic names on an
   English page sit on the left, English names on an Arabic page on the right). */
.om-bidi{unicode-bidi:plaintext}
[dir=rtl] .om-bidi{text-align:right}
[dir=ltr] .om-bidi{text-align:left}
.om-ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.om-ic-xs{width:14px;height:14px}
.om-ic-sm{width:18px;height:18px}
[dir=rtl] .om-flip{transform:scaleX(-1)}
.om-page :focus-visible{outline:2px solid #B98412;outline-offset:2px}

/* ---- coastal banner: the approved banner photo, 143px tall across the content column ---- */
.om-hero{position:relative;height:143px;overflow:hidden;color:#fff;isolation:isolate;
  background:#00244A url(/img/owner/messages-hero.webp) left top / auto 100% no-repeat;
  background-image:image-set(url(/img/owner/messages-hero.webp) 1x, url(/img/owner/messages-hero@2x.webp) 2x)}
[dir=ltr] .om-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:inherit;transform:scaleX(-1)}
.om-hero-text{position:absolute;top:16px;inset-inline-start:16px;inset-inline-end:22px}
.om-hero h1{display:flex;align-items:center;gap:14px;margin:0;color:#fff;font-family:var(--display);font-weight:800;font-size:40px;line-height:52px;letter-spacing:0}
.om-hero-ic{width:50px;height:50px;color:#E0B755;stroke-width:1.7}
.om-hero p{margin:6px 0 0;font-size:22px;line-height:30px;color:#fff;font-weight:500}
.om-hero h1,.om-hero p{text-shadow:0 1px 3px rgba(4,24,42,.45)}

/* ---- summary row (y 215–305 in the reference) ---- */
.om-stats{position:relative;z-index:2;display:grid;gap:10px;margin:0 11px 0 12px;padding-top:0;
  grid-template-columns:189fr 192fr 172fr 208fr}
.om-stats.has-verify{grid-template-columns:441fr 189fr 192fr 172fr 208fr}
.om-stats::before{content:"";position:absolute;inset:-1px -11px auto;height:48px;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.0),var(--om-bg));pointer-events:none}
.om-stat{height:90px;background:var(--om-card);border-radius:16px;box-shadow:0 6px 18px rgba(16,40,61,.08),0 1px 2px rgba(16,40,61,.05);
  display:grid;place-items:center;padding-inline-end:26px;min-width:0;position:relative;overflow:hidden}
.om-stat-unread{background:radial-gradient(120px 70px at 85% 15%,#FDECEF 0%,rgba(253,236,239,0) 70%),#fff}
.om-stat-in{display:grid;grid-template-columns:auto auto;grid-template-areas:"icon num" "lbl lbl";align-items:center;column-gap:10px;row-gap:6px;position:relative}
[dir=rtl] .om-stat-in,[dir=ltr] .om-stat-in{grid-template-areas:"icon num" ". lbl"}
.om-stat-in > .om-stat-ic{grid-area:icon}
.om-stat-in > b{grid-area:num;font-size:26px;line-height:28px;font-weight:800;color:var(--om-text);justify-self:start}
.om-stat-label{grid-area:lbl;justify-self:start;font-size:16px;line-height:22px;color:var(--om-text);font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:6px}
.om-stat-ic{width:33px;height:33px;color:#D9A73C;stroke-width:1.8}
.om-stat-replied .om-stat-ic{color:var(--om-ok)}
.om-stat-unread .om-stat-ic{color:var(--om-unread)}
.om-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--om-unread);flex:none}
.om-dot-sm{width:6px;height:6px}
.om-stat-dot{position:absolute;grid-area:icon;align-self:end;justify-self:start;width:8px;height:8px;margin-bottom:-4px}

.om-verify{height:90px;display:flex;align-items:center;gap:10px;padding:0 14px 0 18px;border-radius:16px;min-width:0;
  background:linear-gradient(180deg,#FDF4DE 0%,#FCEFD3 100%);box-shadow:0 6px 18px rgba(16,40,61,.08),0 1px 2px rgba(16,40,61,.05)}
.om-verify[hidden]{display:none}
.om-verify-ic{width:52px;height:56px;flex:none;filter:drop-shadow(0 2px 3px rgba(185,132,18,.3))}
.om-verify-text{display:grid;gap:4px;min-width:0;flex:1;white-space:nowrap}
.om-verify-text b{font-size:20px;line-height:26px;font-weight:800;color:var(--om-text)}
.om-verify-text small{font-size:11.5px;line-height:18px;color:var(--om-text);overflow:hidden;text-overflow:ellipsis}
.om-verify-btn{flex:none;display:inline-flex;align-items:center;gap:5px;height:44px;padding:0 10px;border-radius:10px;
  background:var(--om-gold-grad);color:#fff;font-weight:700;font-size:12.5px;text-decoration:none;box-shadow:0 4px 10px rgba(185,132,18,.3);background:linear-gradient(180deg,#CC8A0E 0%,#BE7C04 100%)}
.om-verify-btn .om-ic{width:16px;height:16px;stroke-width:2}
.om-verify-btn:hover{filter:brightness(1.05);color:#fff}

/* ---- buttons shared with dialogs and states ---- */
.om-btn-gold{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:12px;border:0;cursor:pointer;
  background:var(--om-gold-grad);color:#fff;font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 4px 12px rgba(185,132,18,.28);white-space:nowrap}
.om-btn-gold:hover{filter:brightness(1.05);color:#fff}
.om-btn-line{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:22px;border:1.5px solid #D6A84A;background:#fff;
  color:var(--om-text);font-weight:700;font-size:14px;text-decoration:none;cursor:pointer;white-space:nowrap}
.om-btn-line .om-ic{color:#D99A1E;stroke-width:2}
.om-btn-line:hover{background:#FFF8E8}
.om-iconbtn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--om-text);cursor:pointer;flex:none;padding:0}
.om-iconbtn:hover,.om-iconbtn.is-on{background:var(--om-guest)}
.om-iconbtn .om-ic{width:30px;height:30px;stroke-width:1.7}
.om-iconbtn[data-om-more] .om-ic{width:30px;height:34px}
.om-iconbtn-safe .om-ic{color:#3B4652}
.om-iconbtn-safe .om-ic path:first-of-type{stroke:#E5484D}

/* ---- workspace: conversations 574px | conversation 658px, 16px apart (x 8–1256, y 330–1000) ---- */
.om-card{background:var(--om-card);border-radius:16px;box-shadow:0 6px 22px rgba(16,40,61,.08),0 1px 3px rgba(16,40,61,.05);min-width:0}
.om-work{display:grid;grid-template-columns:574fr 658fr;gap:16px;margin:25px 10px 0 8px;align-items:stretch}
[dir=ltr] .om-work{margin:25px 8px 0 10px}
.om-work.is-empty{grid-template-columns:minmax(0,1fr)}
.om-work.is-empty .om-chat{display:none}
.om-list{display:flex;flex-direction:column;padding:16px 8px 12px;height:max(560px,calc(100vh - 354px))}
.om-chat{display:flex;flex-direction:column;height:max(560px,calc(100vh - 354px));overflow:hidden}
.om-work.is-empty .om-list{height:auto;min-height:0}

.om-tools{display:grid;grid-template-columns:162px minmax(0,1fr);gap:16px;margin:0 8px 18px}
.om-search,.om-propsel{position:relative;display:flex;align-items:center;min-width:0;margin:0}
.om-search > .om-ic{position:absolute;inset-inline-start:14px;width:22px;height:22px;color:var(--om-text);stroke-width:2;pointer-events:none}
.om-propsel > .om-ic:first-of-type{position:absolute;inset-inline-start:14px;width:20px;height:20px;color:var(--om-text);stroke-width:2;pointer-events:none}
.om-search input,.om-propsel select{width:100%;height:44px;border:1px solid var(--om-border);border-radius:12px;background:#fff;color:var(--om-text);font:inherit;font-size:15px;margin:0;box-shadow:none}
.om-search input{padding-inline:48px 14px}
.om-search input::placeholder{color:#7A8594}
.om-propsel select{appearance:none;-webkit-appearance:none;min-width:0;font-weight:700;font-size:16px;padding-inline:42px 36px;cursor:pointer;text-overflow:ellipsis}
.om-sel-chev{position:absolute;inset-inline-end:12px;pointer-events:none;color:var(--om-text);width:18px;height:18px;stroke-width:2.4}
.om-search input:focus,.om-propsel select:focus{border-color:var(--om-gold);outline:0;box-shadow:0 0 0 3px rgba(199,162,80,.2)}

.om-tabs{display:grid;grid-template-columns:117fr 145fr 120fr 120fr;gap:14px;margin:0 8px 20px}
.om-tab{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:50px;padding:0 8px;border-radius:12px;border:1px solid var(--om-border);background:#fff;
  color:var(--om-text);font:inherit;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 2px 6px rgba(16,40,61,.06);min-width:0;white-space:nowrap}
.om-tab span{overflow:hidden;text-overflow:ellipsis}
.om-tab .om-ic{width:19px;height:19px;stroke-width:2}
.om-tab .om-ic-ok{color:var(--om-ok)}
.om-tab:hover{border-color:var(--om-gold)}
.om-tab.is-on{background:linear-gradient(180deg,#CC8A0E 0%,#BE7C04 100%);border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(185,132,18,.3)}
.om-tab.is-on .om-ic{color:#fff}

.om-convs{flex:1;min-height:0;overflow:auto}
.om-rows{list-style:none;margin:0;padding:0;display:grid}
.om-row{display:grid;grid-template-columns:95px 57px minmax(0,1fr) 16px;align-items:center;column-gap:0;height:88px;padding:0 13px 0 14px;border-radius:12px;
  text-decoration:none;color:inherit;position:relative}
.om-row > .om-prop{margin-inline-end:12px}
.om-row > .om-face{margin-inline-end:17px}
.om-row-main{margin-inline-end:14px}
.om-rows li + li .om-row::before{content:"";position:absolute;top:0;inset-inline:8px;border-top:1px solid var(--om-border)}
.om-row:hover{background:#FAFBFC}
.om-row.is-on{background:var(--om-sel)}
.om-row.is-on::before,:is(.om-rows li:has(.om-row.is-on) + li .om-row)::before{display:none}
.om-prop{width:83px;height:58px;border-radius:8px;overflow:hidden;background:var(--om-guest);display:grid;place-items:center}
.om-prop img{width:100%;height:100%;object-fit:cover;display:block}
.om-prop-ph{color:#94A3B8}
.om-prop-lg{width:113px;height:78px;border-radius:10px}
.om-face{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;background:var(--om-guest);
  box-shadow:0 0 0 2px #fff,0 1px 4px rgba(16,40,61,.18)}
.om-face img{width:100%;height:100%;object-fit:cover}
.om-face > *{width:100%!important;height:100%!important}
.om-face-ini{background:var(--om-navy);color:#fff;font-weight:700;font-size:14px}
.om-face-chat{width:56px;height:56px}
.om-face-chat.om-face-ini{font-size:18px}
.om-row-main{display:grid;gap:4px;min-width:0}
.om-row-l1{display:flex;align-items:center;gap:10px;min-width:0}
.om-row-l1 b{flex:1;min-width:0;font-size:19px;line-height:26px;color:var(--om-text);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.om-row-last{font-size:14.5px;line-height:20px;color:var(--om-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.om-row.is-unread .om-row-last{font-weight:600}
.om-row-side{display:flex;align-items:center;gap:22px;flex:none}
.om-row-time{font-size:12.5px;color:var(--om-muted);white-space:nowrap;min-width:50px;text-align:end}
.om-row-chev{color:var(--om-text);width:28px;height:28px;stroke-width:2.6;margin-inline:-6px}
.om-pill{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 10px;border-radius:11px;font-size:12.5px;font-weight:700;white-space:nowrap}
.om-pill-new{background:#EE1C25;color:#fff}
.om-pill-ok{background:#16A34A;color:#fff}
.om-pill-ok .om-ic{stroke-width:2.8;width:13px;height:13px}
.om-pill-wait{background:#FFF2D6;color:#8A5A00}
.om-count{display:none}

/* ---- open conversation ---- */
.om-chat-head{display:flex;align-items:center;gap:17px;height:122px;flex:none;padding:0 23px 0 26px;border-bottom:1px solid var(--om-border)}
.om-chat-pic{flex:none;text-decoration:none}
.om-chat-title{display:grid;gap:8px;min-width:0;flex:1}
.om-chat-title h2{margin:0;font-size:21px;line-height:30px;font-weight:700;color:var(--om-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0;font-family:var(--display)}
.om-chat-title small{display:flex;align-items:center;gap:6px;color:var(--om-text);font-size:15px;line-height:20px}
.om-chat-title small .om-ic{color:var(--om-text);width:16px;height:16px;stroke-width:2.2}
.om-chat-guest{display:none!important}
.om-chat-actions{display:flex;align-items:center;gap:10px;flex:none}
.om-chat-actions .om-btn-line{width:132px;padding:0}
.om-back{display:none}
.om-menu-wrap,.om-emoji-wrap{position:relative}
.om-menu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:20;min-width:200px;background:#fff;border:1px solid var(--om-border);border-radius:12px;box-shadow:0 12px 30px rgba(16,40,61,.16);padding:6px;display:grid}
[dir=rtl] .om-menu{inset-inline-end:auto;inset-inline-start:0}
.om-menu[hidden]{display:none}
.om-menu > *{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;border:0;background:none;font:inherit;font-weight:600;color:var(--om-text);text-decoration:none;cursor:pointer;text-align:start}
.om-menu > *:hover,.om-menu > *:focus{background:var(--om-guest);outline:0}
.om-menu .om-ic{color:var(--om-gold)}
.om-info{padding:14px 24px;border-bottom:1px solid var(--om-border);background:#FAFBFC;display:grid;gap:10px;font-size:14px;flex:none}
.om-info[hidden]{display:none}
.om-info dl{margin:0;display:grid;gap:6px}
.om-info dl > div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px}
.om-info dt{color:var(--om-muted);font-weight:600}
.om-info dd{margin:0;min-width:0;overflow-wrap:anywhere}
.om-info a{color:var(--om-text);font-weight:700}
.om-offers{display:grid;gap:6px}
.om-offers small{color:var(--om-muted)}
.om-offer{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--om-border);border-radius:10px;background:#fff;text-decoration:none;color:inherit}
.om-info-safe{margin:0;display:flex;align-items:flex-start;gap:8px;color:var(--om-muted)}
.om-info-safe .om-ic{color:var(--om-gold);margin-top:2px}

.om-msgs{flex:1;min-height:0;overflow:auto;padding:24px 30px 16px;display:flex;flex-direction:column;gap:26px}
.om-msg{display:flex;align-items:flex-start;gap:18px}
.om-msg > .om-face{margin-top:2px}
.om-msg.is-guest.is-first > .om-face{margin-top:0}
.om-bubble-wrap{display:grid;gap:8px;min-width:0;max-width:min(480px,calc(100% - 74px))}
.om-msg.is-guest .om-bubble-wrap{max-width:min(382px,calc(100% - 160px))}
.om-who-out{font-size:16px;line-height:20px;font-weight:800;color:var(--om-text)}
.om-bubble{position:relative;padding:12px 20px 14px;border-radius:16px;background:var(--om-guest);display:grid;gap:6px;min-width:0}
/* the small tail toward the sender's photo */
.om-bubble::before{content:"";position:absolute;top:18px;inset-inline-start:-10px;width:11px;height:18px;background:inherit;clip-path:polygon(0 0,100% 50%,0 100%)}
[dir=ltr] .om-bubble::before{clip-path:polygon(100% 0,0 50%,100% 100%)}
.om-msg.is-mine .om-bubble{background:var(--om-mine);padding:14px 20px 16px 20px;padding-inline-end:134px}
.om-msg.is-mine .om-bubble-top{display:block}
.om-msg.is-mine .om-time-in{position:absolute;top:14px;inset-inline-end:22px}
.om-msg.is-mine .om-meta{position:absolute;bottom:14px;inset-inline-end:16px}
.om-msg.is-mine .om-body{max-width:330px}
.om-bubble-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.om-who{font-size:14px;line-height:18px;font-weight:800;color:var(--om-text)}
.om-who.om-who-out{font-size:17px;line-height:22px;font-weight:800}
.om-time-in{font-size:14px;color:var(--om-muted);white-space:nowrap}
.om-body{font-size:17px;line-height:28px;font-weight:500;color:var(--om-text);white-space:pre-wrap;overflow-wrap:anywhere}
.om-meta{display:flex;align-items:center;gap:8px;justify-content:flex-end;font-size:12px;color:var(--om-muted)}
.om-meta:empty,:is(.om-msg.is-guest .om-meta:not(:has(*))){display:none}
.om-tick{display:inline-flex;color:#94A3B8}
.om-tick.is-read{color:#2E6BE6}
.om-ic-tick{width:26px;height:22px;stroke-width:2.2}
.om-time{flex:none;margin-top:10px;margin-inline-start:2px;font-size:14px;line-height:20px;color:var(--om-muted);white-space:nowrap}
.om-msg.is-guest:not(.is-first) .om-time{margin-top:-6px}
.om-st-sending .om-bubble{opacity:.7}
.om-st-failed .om-bubble{outline:1.5px solid var(--om-unread)}
.om-held{color:#8A5A00;font-size:12px}
.om-link{border:0;background:none;padding:0;color:#B98412;font:inherit;font-weight:700;cursor:pointer;text-decoration:underline}
.om-daysep{display:flex;justify-content:center}
.om-daysep span{font-size:12px;color:var(--om-muted);background:var(--om-bg);padding:3px 12px;border-radius:999px}
.om-more{display:flex;justify-content:center}
.om-start{margin:auto;text-align:center;color:var(--om-muted);max-width:380px;font-size:15px}
.om-banner{margin:0 16px 12px;padding:12px 14px;border-radius:12px;background:var(--om-guest);color:var(--om-text);font-size:14px}
.om-chat > .ah-note{margin:0 16px 12px}

.om-compose{flex:none;padding:18px 12px 18px 22px;border-top:1px solid var(--om-border);background:#fff}
[dir=rtl] .om-compose{padding:18px 13px 18px 22px}
.om-compose-err{color:var(--om-unread);font-size:13px;font-weight:600;margin-bottom:6px}
.om-compose-err:empty{display:none}
.om-compose-row{display:flex;align-items:stretch;gap:13px}
/* Send sits on the right in both languages, where the approved design has it. */
[dir=ltr] .om-compose-row .om-send{order:2}
.om-input{flex:1;min-width:0;display:flex;align-items:flex-end;gap:6px;min-height:64px;border:1px solid #D5DCE4;border-radius:12px;background:#fff;padding:0 6px 0 18px;box-shadow:0 1px 3px rgba(16,40,61,.05)}
[dir=rtl] .om-input{padding:0 18px 0 6px}
.om-input:focus-within{border-color:var(--om-gold);box-shadow:0 0 0 3px rgba(199,162,80,.2)}
.om-input textarea{flex:1;min-width:0;border:0!important;outline:0;resize:none;background:transparent!important;font:inherit;font-size:16px;line-height:24px;color:var(--om-text);padding:19px 0 0!important;min-height:62px!important;max-height:140px;margin:0;box-shadow:none;overflow-y:auto}
.om-input textarea::placeholder{color:#64748B}
.om-input textarea.is-invalid{color:var(--om-unread)}
.om-emoji-btn{width:48px;height:48px;margin-bottom:7px}
.om-emoji-btn .om-ic{width:30px;height:30px;stroke-width:1.7}
.om-emoji{position:absolute;bottom:calc(100% + 10px);inset-inline-end:0;z-index:20;width:264px;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:8px;background:#fff;border:1px solid var(--om-border);border-radius:12px;box-shadow:0 12px 30px rgba(16,40,61,.16)}
.om-emoji[hidden]{display:none}
.om-emoji button{border:0;background:none;font-size:1.3rem;line-height:1;padding:6px;border-radius:8px;cursor:pointer}
.om-emoji button:hover,.om-emoji button:focus{background:var(--om-guest);outline:0}
.om-send{flex:none;display:grid;place-items:center;width:72px;height:64px;border-radius:12px;border:0;cursor:pointer;background:linear-gradient(160deg,#D49412 0%,#BD7C05 100%);color:#fff;box-shadow:0 4px 12px rgba(185,132,18,.3)}
.om-send:hover{filter:brightness(1.05)}
.om-send:disabled{opacity:.6;cursor:progress}
.om-send-ic{width:30px;height:30px;stroke-width:2.2}

/* ---- empty, picker and no-match ---- */
.om-pick{margin:auto;display:grid;justify-items:center;gap:12px;padding:32px;text-align:center;color:var(--om-muted)}
.om-pick-ic{width:56px;height:56px;color:var(--om-gold);stroke-width:1.4}
.om-empty{display:grid;justify-items:center;gap:10px;text-align:center;padding:56px 24px;margin:4px 8px;border-radius:14px;background:linear-gradient(180deg,#F8FAFC 0%,#F1F3F6 100%);border:1px dashed #D3DCE5}
.om-empty-ic{width:72px;height:72px;padding:16px;border-radius:50%;background:var(--om-deep);color:#E0B755;stroke-width:1.6}
.om-empty h2{margin:6px 0 0;font-size:22px;color:var(--om-text);font-family:var(--display);letter-spacing:0}
.om-empty p{margin:0 0 8px;color:var(--om-muted);max-width:420px}
.om-nomatch{display:grid;justify-items:center;gap:6px;padding:40px 16px;text-align:center;color:var(--om-muted)}
.om-nomatch b{color:var(--om-text)}
.om-nomatch-ic{width:40px;height:40px;color:var(--om-gold)}

/* ---- narrower computers: same layout, tighter ---- */

/* English (and the other left-to-right languages) carry longer labels than the Arabic design: let them fit. */
[dir=ltr] .om-stat{padding-inline:12px}
[dir=ltr] .om-stat-in{grid-template-areas:"icon num" "lbl lbl"}
[dir=ltr] .om-stat-label{font-size:15px}
[dir=ltr] .om-verify-text{white-space:normal}
[dir=ltr] .om-verify-text b{font-size:16px;line-height:20px}
[dir=ltr] .om-verify-text small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:15px}
[dir=ltr] .om-tabs{grid-template-columns:auto auto auto auto}
[dir=ltr] .om-tab{padding:0 12px;white-space:nowrap}

@media (max-width:1366px){
  .om-stats.has-verify{grid-template-columns:repeat(4,minmax(0,1fr))}
  .om-stats.has-verify .om-verify{grid-column:1 / -1}
  .om-row{grid-template-columns:80px 48px minmax(0,1fr) 14px;padding:0 10px}
  .om-row > .om-prop{margin-inline-end:10px}
  .om-prop{width:70px;height:52px}
  .om-row .om-face{width:36px;height:36px}
  .om-row > .om-face{margin-inline-end:12px}
  .om-row-side{gap:10px}
  .om-tabs{gap:8px}
  .om-tab{font-size:14px;padding:0 4px}
}
@media (max-width:1180px){
  .om-tools{grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:10px}
  .om-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .om-chat-actions{gap:4px}
  .om-chat-actions .om-btn-line{width:auto;padding:0 12px}
  .om-chat-actions .om-btn-line span{display:none}
  .om-msg.is-guest .om-bubble-wrap{max-width:calc(100% - 140px)}
}
/* ---- tablet and phone: one panel at a time ---- */
@media (max-width:960px){
  .om-hero{height:128px}
  .om-hero-text{top:14px;inset-inline-start:16px}
  .om-hero h1{font-size:30px;line-height:40px}
  .om-hero-ic{width:38px;height:38px}
  .om-hero p{font-size:16px;line-height:24px}
  .om-stats,.om-stats.has-verify{grid-template-columns:repeat(4,minmax(0,1fr));margin:-14px 10px 0}
  .om-stats::before{inset:-1px -10px auto}
  .om-stats.has-verify .om-verify{grid-column:1 / -1}
  .om-work,[dir=ltr] .om-work{grid-template-columns:minmax(0,1fr);margin:18px 10px 0}
  .om-list{height:auto;min-height:0}
  .om-work .om-chat{display:none}
  .om-work.has-thread .om-list{display:none}
  .om-work.has-thread .om-chat{display:flex;height:calc(100vh - 150px);height:calc(100dvh - 150px);min-height:360px}
  .om-work.has-thread{margin-top:0}
  .om-page:has(.om-work.has-thread) .om-hero,.om-page:has(.om-work.has-thread) .om-stats,.om-page:has(.om-work.has-thread) [data-om-hold]{display:none}
  .om-back{display:inline-grid}
  .om-back .om-ic{width:24px;height:24px}
  .om-chat-head{height:auto;gap:10px;padding:12px}
  .om-prop-lg{width:64px;height:48px;border-radius:8px}
  .om-chat-title{gap:2px}
  .om-chat-title h2{font-size:17px;line-height:24px}
  .om-chat-title small{font-size:13px}
  .om-chat-actions{gap:0}
  .om-chat-actions .om-iconbtn-safe{display:none}
  .om-iconbtn .om-ic{width:24px;height:24px}
  .om-convs{overflow:visible}
  .om-compose{padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important}
  .om-input{min-height:52px}
  .om-input textarea{min-height:50px!important;padding-top:13px!important}
  .om-emoji-btn{margin-bottom:1px}
  .om-send{width:56px;height:52px}
  .om-msgs{padding:16px 12px;gap:18px}
  .om-msg{gap:10px}
  .om-face-chat{width:38px;height:38px}
  .om-bubble-wrap,.om-msg.is-guest .om-bubble-wrap{max-width:calc(100% - 48px)}
  .om-msg.is-guest{flex-wrap:wrap}
  .om-msg.is-guest .om-time{flex-basis:100%;margin:-12px 0 0;padding-inline-start:48px;font-size:12px}
  .om-body{font-size:15px;line-height:26px}
}
@media (max-width:640px){
  /* Phones: the same navy-and-gold page, made compact so the conversations start on the first screen. */
  .om-page{padding-bottom:12px}
  .om-page .om-hero{height:96px;background-size:cover;background-position:center}
  .om-page .om-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(4,24,42,.72) 0%,rgba(4,24,42,.45) 55%,rgba(4,24,42,.1) 100%)}
  [dir=ltr] .om-page .om-hero::after{background:linear-gradient(90deg,rgba(4,24,42,.72) 0%,rgba(4,24,42,.45) 55%,rgba(4,24,42,.1) 100%)}
  .om-page .om-hero-text{top:14px;inset-inline:16px}
  .om-page .om-hero h1{font-size:24px;line-height:32px;gap:10px}
  .om-page .om-hero-ic{width:28px;height:28px}
  .om-page .om-hero{height:104px}
  .om-page .om-hero p{font-size:13px;line-height:18px;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .om-page .om-stats,.om-page .om-stats.has-verify{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:-12px 10px 0}
  .om-page .om-stats::before{display:none}
  .om-page .om-stat{height:auto;min-height:66px;padding:7px 4px;border-radius:12px}
  .om-page .om-stat-in{grid-template-areas:"icon num" "lbl lbl"!important;column-gap:5px;row-gap:3px;justify-items:center}
  .om-page .om-stat-in > b{font-size:19px;line-height:22px}
  .om-page .om-stat-ic{width:20px;height:20px}
  .om-page .om-stat-label{justify-self:center;font-size:11px;line-height:13px;white-space:normal;text-align:center;gap:3px;max-width:100%;font-weight:600}
  .om-page .om-stat-label .om-dot{width:6px;height:6px}
  .om-page .om-verify{grid-column:1 / -1;order:9;height:auto;min-height:0;padding:8px 10px;gap:8px;border-radius:12px}
  .om-page .om-verify-ic{width:30px;height:32px}
  .om-page .om-verify-text{gap:0}
  .om-page .om-verify-text{white-space:normal}
  .om-page .om-verify-text b{font-size:13.5px;line-height:18px}
  .om-page .om-verify-text small{display:none}
  .om-page .om-verify-btn{height:34px;font-size:12px;padding:0 10px}
  .om-page .om-work,[dir=ltr] .om-work{margin:12px 8px 0}
  .om-page .om-list{padding:10px 0 4px;border-radius:14px}
  .om-page .om-tools{grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:0 10px 10px}
  .om-page .om-tools .om-propsel{order:2;width:132px}
  .om-page .om-propsel select{padding-inline:34px 26px;font-size:14px}
  .om-page .om-propsel > .om-ic:first-of-type{inset-inline-start:10px;width:17px;height:17px}
  .om-page .om-input textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .om-page .om-tools .om-search{order:1}
  .om-page .om-propsel select,.om-page .om-search input{height:42px;font-size:14px}
  .om-page .om-tabs{display:flex;gap:6px;margin:0 10px 6px;overflow-x:auto;scrollbar-width:none;height:auto}
  .om-page .om-tabs::-webkit-scrollbar{display:none}
  .om-page .om-tab{flex:none;height:36px;padding:0 12px;font-size:13px;border-radius:18px}
  .om-page .om-row{grid-template-columns:58px minmax(0,1fr) 12px;height:auto;min-height:76px;padding:10px 12px;column-gap:12px}
  .om-page .om-row > .om-prop{grid-column:1;grid-row:1;width:58px;height:58px;border-radius:10px}
  .om-page .om-row > .om-face{grid-column:1;grid-row:1;align-self:end;justify-self:end;width:28px;height:28px;margin:0 -6px -6px 0;box-shadow:0 0 0 2px #fff;font-size:12px;z-index:1}
  [dir=rtl] .om-page .om-row > .om-face{margin:0 0 -6px -6px}
  .om-page .om-row > .om-row-main{grid-column:2;grid-row:1}
  .om-page .om-row > .om-row-chev{grid-column:3;grid-row:1;width:22px;height:22px;margin-inline:-5px}
  .om-page .om-row-l1 b{font-size:15.5px}
  .om-page .om-row-side{gap:6px}
  .om-page .om-pill{height:20px;font-size:11px;padding:0 7px}
  .om-page .om-row-time{min-width:0;font-size:11.5px}
  .om-page .om-row-last{font-size:13.5px}
  .om-page .om-chat-actions .om-btn-line{display:none}
  .om-page .om-body{unicode-bidi:plaintext;text-align:start}
  /* The site footer is long on a phone; the inbox stays an app-like screen. */
  body.os-route:has(.om-page) .site-footer{display:none}
}
@media (max-width:960px){
  /* An open conversation on a phone: the bottom bar steps aside so the composer sits at the foot of the screen. */
  body:has(.om-work.has-thread) .bottom-nav{display:none!important}
  html body:has(.om-work.has-thread){padding-bottom:0!important}
}
/* The assistant's floating button would sit on the send button here; the page has its own composer. */
body.os-route:has(.om-page) #asLaunch{display:none}
@media (prefers-reduced-motion:no-preference){.om-row,.om-tab,.om-send,.om-verify-btn{transition:background-color .15s,border-color .15s,filter .15s}}