/* mdr Development - visual assistant styles (dev-va 1.0, 2026-10-12): the video-answer, mode-switch and presence
   sections of mdr.sa site.css, copied by build/kit/sister_va.py (org table, Masharif notice, launcher and carousel
   sections are not included). */
/* === digital assistant (video answers) v1.0.9 === */
#mdrbot-mode{display:flex;gap:6px;padding:8px 12px;background:#fff;border-bottom:1px solid #eee;flex:0 0 auto}
#mdrbot-mode button{flex:1;border:1px solid #ddd;background:#fff;border-radius:20px;padding:6px 8px;font-size:12px;cursor:pointer;font-family:inherit;color:#333;display:flex;align-items:center;justify-content:center;gap:6px;transition:.15s}
#mdrbot-mode button svg{width:14px;height:14px;display:block}
#mdrbot-mode button.on{background:#141414;color:#fff;border-color:#141414}
#mdrbot-mode button:not(.on):hover{border-color:#c8a35a}
.mdr-vmsg{max-width:100%;padding:6px 6px 10px}
.mdr-vid{width:100%;aspect-ratio:16/9;display:block;border-radius:9px;background:transparent;object-fit:cover}
.mdr-vid::-webkit-media-controls{display:none!important}
.mdr-vid::-webkit-media-controls-enclosure{display:none!important}
.mdr-idle{width:100%;aspect-ratio:16/9;display:block;border-radius:9px}
.mdr-vtxt{padding:9px 7px 0;font-size:13px}
.mdr-vmsg .mdr-src{margin:8px 7px 0}
/* === v1.5.2: mode switch as plain text links «محادثة نصية | مساعد مرئي» (text chat first / default) === */
#mdrbot-mode{display:flex;align-items:center;justify-content:center;gap:10px;padding:7px 12px;background:#fff;border-bottom:1px solid #eee}
#mdrbot-mode button{flex:0 0 auto;border:0;background:transparent;border-radius:0;padding:4px 2px;font-size:13px;color:#8a8a8a;display:inline-flex;align-items:center;gap:6px;font-family:inherit;cursor:pointer;transition:.15s}
#mdrbot-mode button svg{width:15px;height:15px;display:block}
#mdrbot-mode button.on{background:transparent;color:#141414;border:0;font-family:"mdr-bold",inherit}
#mdrbot-mode button:hover{color:#141414}
#mdrbot-mode .mdr-msep{width:1px;height:14px;background:#cfcfcf;display:block}

/* Phase 4B.1 presence (option B) */
#mdr-pres{position:relative;flex:none;background:#fff;border-bottom:1px solid rgba(185,151,91,.34)}
#mdr-pres[hidden]{display:none}
.mdr-pres__fold{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .24s cubic-bezier(.25,.8,.25,1),opacity .2s ease}
.mdr-pres__fold>div{min-height:0;overflow:hidden}
.mdr-pres__fold--stage{grid-template-rows:0fr;opacity:0}
#mdr-pres.is-open .mdr-pres__fold--row{grid-template-rows:0fr;opacity:0}
#mdr-pres.is-open .mdr-pres__fold--stage{grid-template-rows:1fr;opacity:1}
.mdr-pres__row{display:flex;align-items:center;gap:10px;padding:5px 10px 6px;min-height:54px}
.mdr-pres__thumb{position:relative;flex:none;width:96px;aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:#eef0ee}
.mdr-pres__thumb img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.mdr-pres__name{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:#10201c;line-height:1.3}
.mdr-pres__name::before{content:"";width:6px;height:6px;border-radius:50%;background:#b9975b;flex:none}
.mdr-pres__act{display:none;margin-inline-start:auto;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid #e4e1d9;background:#fff;color:#5f5a50;cursor:pointer;align-items:center;justify-content:center;transition:border-color .15s,color .15s}
.mdr-pres__act:hover,.mdr-pres__act:focus-visible{border-color:#b9975b;color:#8a6d3b;outline:none}
.mdr-pres__act svg{width:15px;height:15px;display:block}
.mdr-pres__act--play{background:#b9975b;border-color:#b9975b;color:#fff}
.mdr-pres__act--play:hover,.mdr-pres__act--play:focus-visible{color:#fff;background:#a8874d}
#mdr-pres[data-mode=done] .mdr-pres__act[data-p=replay],#mdr-pres[data-mode=blocked] .mdr-pres__act[data-p=play]{display:inline-flex}
.mdr-pres__stage{padding:8px 10px 9px}
.mdr-pres__box{position:relative;width:100%;margin-inline:auto;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#eef0ee}
.mdr-pres__idle,.mdr-pres__vid{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.mdr-pres__vid{opacity:0;transition:opacity .18s ease}
#mdr-pres.is-speaking .mdr-pres__vid{opacity:1}
.mdr-pres__vid::-webkit-media-controls,.mdr-pres__vid::-webkit-media-controls-enclosure{display:none!important}
.mdr-pres__box::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;background:linear-gradient(to top,rgba(10,20,18,.30),rgba(10,20,18,0));pointer-events:none}
.mdr-pres__ctl{position:absolute;bottom:8px;inset-inline-end:8px;z-index:1;display:none;gap:6px}
#mdr-pres.is-speaking .mdr-pres__ctl{display:flex}
.mdr-pres__ctl button{width:28px;height:28px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.26);background:rgba(16,32,28,.40);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s}
.mdr-pres__ctl button:hover,.mdr-pres__ctl button:focus-visible{background:rgba(16,32,28,.62);outline:none}
.mdr-pres__ctl svg{width:14px;height:14px;display:block}
.mdr-pres__ctl .i-off,.mdr-pres__ctl .is-muted .i-on{display:none}
.mdr-pres__ctl .is-muted .i-off{display:block}
.mdr-pres__ind{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;opacity:0;pointer-events:none}
.mdr-pres__ind::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#b9975b,transparent)}
#mdr-pres[data-state=processing] .mdr-pres__ind{opacity:1}
#mdr-pres[data-state=processing] .mdr-pres__ind::before{animation:mdrPresInd 1.1s linear infinite}
#mdr-pres[data-state=listening] .mdr-pres__thumb{box-shadow:0 0 0 2px #b9975b}
@keyframes mdrPresInd{0%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
.mdr-has-pres .mdr-vmsg{max-width:88%;padding:11px 13px}
.mdr-has-pres .mdr-vmsg .mdr-vtxt{padding:0;font-size:13.5px}
.mdr-msg.mdr-active{border-inline-start:2px solid #b9975b}
@media (prefers-reduced-motion: reduce){.mdr-pres__fold,.mdr-pres__vid{transition:none}#mdr-pres[data-state=processing] .mdr-pres__ind::before{animation:none}}
/* 4B.1: while the assistant speaks, suggested actions stay usable in one scrollable row */
#mdrbot-panel.mdr-pres-talk #mdrbot-chips,#mdrbot-panel.mdr-pres-talk #mdrbot-chips.mdr-qa{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:7px;padding-top:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#mdrbot-panel.mdr-pres-talk #mdrbot-chips::-webkit-scrollbar{display:none}
#mdrbot-panel.mdr-pres-talk #mdrbot-chips button{flex:0 0 auto;white-space:nowrap}
#mdrbot-panel.mdr-pres-talk #mdrbot-chips.mdr-qa .mdr-qa-main{min-height:0;padding:6px 12px;border-radius:20px;gap:6px}
#mdrbot-panel.mdr-pres-talk #mdrbot-chips.mdr-qa .mdr-qa-main svg{width:14px;height:14px;flex-basis:14px}
#mdrbot-panel.mdr-pres-talk #mdrbot-chips.mdr-qa .mdr-endchip{grid-column:auto}
/* ===== Phase 4C: mobile adaptive presence ===== */
.mdr-pres__stage{position:relative}
.mdr-pres__ctl{bottom:17px;inset-inline-end:18px}
.mdr-pres__sname{display:none}
#mdr-pres.is-cspk .mdr-pres__stage{display:flex;align-items:center;gap:10px;padding:5px 12px 6px}
#mdr-pres.is-cspk .mdr-pres__box{width:96px;flex:none;margin:0;border-radius:7px}
#mdr-pres.is-cspk .mdr-pres__box::after{display:none}
#mdr-pres.is-cspk .mdr-pres__sname{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:#10201c;line-height:1.3;min-width:0}
#mdr-pres.is-cspk .mdr-pres__sname::before{content:"";width:6px;height:6px;border-radius:50%;background:#b9975b;flex:none}
#mdr-pres.is-cspk .mdr-pres__ctl{position:static;margin-inline-start:auto}
#mdr-pres.is-cspk .mdr-pres__ctl button{background:#fff;border-color:#e4e1d9;color:#5f5a50;-webkit-backdrop-filter:none;backdrop-filter:none}
#mdr-pres.is-swap .mdr-pres__box{transition:width .24s cubic-bezier(.25,.8,.25,1),border-radius .24s ease}
#mdr-pres.is-swap .mdr-pres__stage{transition:padding .24s ease}
/* mobile / constrained viewport: the assistant fills the visible viewport */
#mdrbot.mdr-m.mdr-open #mdrbot-btn,#mdrbot.mdr-m.mdr-open #mdrbot-badge,#mdrbot.mdr-m.mdr-open #mdrbot-nudge{display:none!important}
#mdrbot.mdr-m.mdr-open #mdrbot-panel{position:fixed;left:0;right:0;top:var(--mdr-vt,0px);bottom:auto;width:auto;max-width:none;height:100vh;height:100dvh;height:var(--mdr-vh,100dvh)!important;max-height:none!important;border:0;border-radius:0;box-shadow:none;animation:none;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
#mdrbot.mdr-m #mdrbot-head{padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:10px}
#mdrbot.mdr-m #mdrbot-close{width:44px;height:44px;margin:-12px 0;display:inline-flex;align-items:center;justify-content:center}
#mdrbot.mdr-m #mdrbot-foot{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
#mdrbot.mdr-m #mdrbot-in{font-size:16px;padding-bottom:10px!important}
#mdrbot.mdr-m #mdrbot-mic,#mdrbot.mdr-m #mdrbot-send{width:44px;height:44px;min-width:44px;flex:0 0 44px}
#mdrbot.mdr-m #mdrbot-body{overscroll-behavior:contain}
#mdrbot.mdr-m #mdrbot-chips button{min-height:40px}
#mdrbot.mdr-m .mdr-pres__row{min-height:45px}
#mdrbot.mdr-m .mdr-pres__thumb{width:80px}
#mdrbot.mdr-m .mdr-pres__act,#mdrbot.mdr-m .mdr-pres__ctl button{position:relative;isolation:isolate;width:44px;height:44px;border:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
#mdrbot.mdr-m .mdr-pres__act::before,#mdrbot.mdr-m .mdr-pres__ctl button::before{content:"";position:absolute;inset:6px;border-radius:50%;z-index:-1;border:1px solid #e4e1d9;background:#fff}
#mdrbot.mdr-m .mdr-pres__act--play::before{background:#b9975b;border-color:#b9975b}
#mdrbot.mdr-m .mdr-pres__ctl{gap:0}
#mdrbot.mdr-m #mdr-pres:not(.is-cspk) .mdr-pres__ctl{bottom:11px;inset-inline-end:12px}
#mdrbot.mdr-m #mdr-pres:not(.is-cspk) .mdr-pres__ctl button{color:#fff}
#mdrbot.mdr-m #mdr-pres:not(.is-cspk) .mdr-pres__ctl button::before{background:rgba(16,32,28,.45);border-color:rgba(255,255,255,.3)}
#mdrbot.mdr-m #mdr-pres.is-cspk .mdr-pres__ctl button{background:transparent;color:#5f5a50}
/* keyboard open: only what typing needs */
#mdrbot.mdr-kb #mdrbot-mode,#mdrbot.mdr-kb #mdrbot-chips,#mdrbot.mdr-kb #mdrbot-note{display:none}
#mdrbot.mdr-kb #mdrbot-foot{padding-bottom:10px}
/* low landscape: compact presence only, suggested actions in one row */
#mdrbot.mdr-m-land #mdrbot-mode,#mdrbot.mdr-m-land #mdrbot-note{display:none}
#mdrbot.mdr-m-land #mdrbot-chips,#mdrbot.mdr-m-land #mdrbot-chips.mdr-qa{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:7px;padding-top:2px;scrollbar-width:none}
#mdrbot.mdr-m-land #mdrbot-chips::-webkit-scrollbar{display:none}
#mdrbot.mdr-m-land #mdrbot-chips button{flex:0 0 auto;white-space:nowrap}
#mdrbot.mdr-m-land #mdrbot-chips.mdr-qa .mdr-qa-main{min-height:0;padding:6px 12px;border-radius:20px}
@media (prefers-reduced-motion: reduce){#mdr-pres.is-swap .mdr-pres__box,#mdr-pres.is-swap .mdr-pres__stage{transition:none}}
#mdrbot.mdr-m #mdrbot-mode{padding-top:3px;padding-bottom:3px}
#mdrbot.mdr-m #mdrbot-in{line-height:1.4}
#mdrbot.mdr-m #mdrbot-foot{padding-top:8px}
#mdrbot.mdr-m #mdrbot-note{padding-bottom:4px;line-height:1.4}
#mdrbot.mdr-kb-tight #mdr-pres{display:none}
#mdrbot.mdr-m #mdrbot-in{min-width:0}
/* ===== 4D: focus + touch hit areas (visual size unchanged) ===== */
#mdr-pres button:focus-visible,#mdrbot-mode button:focus-visible{outline:2px solid #b9975b;outline-offset:2px}
@media (pointer:coarse){
#mdrbot:not(.mdr-m) .mdr-pres__act,#mdrbot:not(.mdr-m) .mdr-pres__ctl button{position:relative;isolation:isolate;width:44px;height:44px;border:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
#mdrbot:not(.mdr-m) .mdr-pres__act::before{content:"";position:absolute;inset:7px;border-radius:50%;z-index:-1;border:1px solid #e4e1d9;background:#fff}
#mdrbot:not(.mdr-m) .mdr-pres__act--play::before{background:#b9975b;border-color:#b9975b}
#mdrbot:not(.mdr-m) .mdr-pres__ctl button::before{content:"";position:absolute;inset:8px;border-radius:50%;z-index:-1;border:1px solid rgba(255,255,255,.26);background:rgba(16,32,28,.40)}
#mdrbot:not(.mdr-m) .mdr-pres__ctl{gap:0;bottom:9px;inset-inline-end:10px}
}