:root{
  --bg:#020814;
  --board:#082037;
  --panel:#07111f;
  --panel2:#111827;
  --input:#0f172a;
  --text:#f8fafc;
  --muted:#aab4c3;
  --line:rgba(148,163,184,.24);
  --line-strong:rgba(148,163,184,.42);
  --blue:#1d9bff;
  --blue2:#0877d8;
  --shadow:0 20px 60px rgba(0,0,0,.48);
  --radius:28px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:radial-gradient(circle at 50% -18%,#123b5e 0%,var(--bg) 48%,#000 100%);color:var(--text);overflow:hidden}
body{min-width:320px}

button,input{font:inherit}
button{
  border:1px solid var(--line-strong);
  background:#111827;
  color:var(--text);
  border-radius:999px;
  min-height:52px;
  padding:0 22px;
  font-weight:950;
  font-size:clamp(14px,2vw,24px);
  box-shadow:0 10px 26px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06);
  cursor:pointer;
  white-space:nowrap;
}
button:active{transform:translateY(1px)}

.mos-app{
  width:100%;
  height:100dvh;
  max-width:1280px;
  margin:0 auto;
  padding:clamp(4px,1.1vw,12px);
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:clamp(8px,1.2vw,14px);
}

.mos-board{
  position:relative;
  min-height:0;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  overflow:hidden;
  background-color:var(--board);
  box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.04);
  background-image:
    linear-gradient(rgba(148,163,184,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.10) 1px, transparent 1px),
    linear-gradient(rgba(148,163,184,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.22) 1px, transparent 1px);
  background-size:28px 28px,28px 28px,112px 112px,112px 112px;
}

#draw{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  touch-action:none;
}

.mos-topbar{
  position:absolute;
  top:clamp(12px,1.5vw,20px);
  left:clamp(14px,2vw,26px);
  right:clamp(14px,2vw,26px);
  display:flex;
  align-items:center;
  gap:clamp(8px,1.2vw,14px);
  z-index:3;
}

.mos-spacer{flex:1}

.mos-status{
  position:absolute;
  top:clamp(78px,9vw,96px);
  left:clamp(18px,2.2vw,30px);
  z-index:2;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(8,15,28,.78);
  border:1px solid rgba(148,163,184,.22);
  color:#cbd5e1;
  font-weight:900;
  font-size:clamp(12px,1.4vw,15px);
  display:none;
}

.mos-prompt{
  position:absolute;
  top:clamp(106px,13vw,138px);
  left:clamp(18px,2.2vw,30px);
  max-width:min(620px,calc(100% - 36px));
  min-height:clamp(72px,9vw,96px);
  display:flex;
  align-items:center;
  padding:0 clamp(22px,3vw,36px);
  border-radius:30px;
  background:rgba(8,15,28,.94);
  border:1px solid var(--line-strong);
  color:var(--muted);
  font-size:clamp(18px,3vw,34px);
  font-weight:900;
  z-index:2;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.mos-result{
  position:absolute;
  top:clamp(196px,25vw,266px);
  left:clamp(18px,2.2vw,30px);
  min-width:clamp(96px,13vw,136px);
  min-height:clamp(86px,12vw,118px);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:30px;
  background:rgba(8,15,28,.96);
  border:1px solid var(--line-strong);
  color:white;
  font-size:clamp(34px,7vw,64px);
  font-weight:1000;
  z-index:2;
  padding:12px 24px;
  white-space:pre-wrap;
  text-align:center;
}

.mos-guide{
  position:absolute;
  right:clamp(16px,2vw,26px);
  bottom:clamp(16px,2vw,26px);
  z-index:4;
  width:min(520px,calc(100% - 32px));
  padding:18px 20px;
  border-radius:24px;
  background:rgba(8,15,28,.90);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow);
  color:#cbd5e1;
  line-height:1.4;
  display:none;
}
.mos-guide b{color:white}
.mos-guide span{display:block;margin-top:6px;font-weight:750}

.mos-controls{
  display:grid;
  gap:clamp(8px,1vw,12px);
  padding-bottom:max(0px,env(safe-area-inset-bottom));
  min-width:0;
}

.mos-row,.mos-input-row{
  display:flex;
  align-items:center;
  gap:clamp(8px,1.1vw,12px);
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  min-width:0;
}
.mos-row::-webkit-scrollbar,.mos-input-row::-webkit-scrollbar{display:none}

.mos-row-primary button{min-height:clamp(54px,7vw,66px);font-size:clamp(16px,2.4vw,30px)}
.mos-row-secondary button{min-height:clamp(46px,6vw,56px);font-size:clamp(13px,1.8vw,21px)}

.mos-input-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
}

.mos-icon-btn{
  width:clamp(58px,8vw,74px);
  min-width:clamp(58px,8vw,74px);
  height:clamp(62px,8vw,74px);
  padding:0;
  border-radius:26px;
  font-size:clamp(24px,4vw,34px);
  display:flex;
  align-items:center;
  justify-content:center;
}

#expr{
  width:100%;
  min-width:0;
  height:clamp(62px,8vw,74px);
  border-radius:30px;
  border:3px solid var(--blue2);
  outline:none;
  background:var(--input);
  color:#fff;
  font-size:clamp(18px,3vw,30px);
  font-weight:950;
  padding:0 clamp(18px,2.5vw,28px);
  box-shadow:0 0 0 3px rgba(29,155,255,.16),inset 0 1px 0 rgba(255,255,255,.05);
}

.mos-solve{
  height:clamp(62px,8vw,74px);
  min-width:clamp(104px,12vw,128px);
  border-radius:30px;
  border:1px solid rgba(255,255,255,.34);
  background:linear-gradient(180deg,#38bdf8,#1689f5);
  color:white;
  font-size:clamp(18px,3vw,30px);
  font-weight:1000;
}

@media (max-width:720px){
  html,body{overflow:hidden}
  .mos-app{
    padding:4px;
    gap:7px;
  }
  .mos-board{
    border-radius:24px;
  }
  .mos-topbar{
    gap:8px;
  }
  .mos-topbar button{
    min-height:48px;
    padding:0 16px;
    font-size:15px;
  }
  .mos-prompt{
    left:18px;
    right:18px;
    max-width:none;
    top:116px;
  }
  .mos-result{
    top:220px;
    left:18px;
  }
  .mos-row-primary button{
    min-height:58px;
    padding:0 20px;
  }
  .mos-row-secondary button{
    min-height:50px;
    padding:0 18px;
  }
}

@media (max-width:520px){
  .mos-app{
    grid-template-rows:minmax(360px,1fr) auto;
  }
  .mos-board{
    min-height:360px;
  }
  .mos-input-row{
    grid-template-columns:56px minmax(0,1fr) 56px 96px;
    gap:7px;
  }
  .mos-icon-btn{
    width:56px;
    min-width:56px;
    height:60px;
    border-radius:22px;
  }
  #expr{
    height:60px;
    border-radius:24px;
    font-size:18px;
    padding:0 16px;
  }
  .mos-solve{
    height:60px;
    min-width:96px;
    border-radius:24px;
    font-size:20px;
  }
  .mos-topbar button{
    min-height:44px;
    padding:0 13px;
    font-size:14px;
  }
}

@media (max-height:720px){
  .mos-prompt{top:96px;min-height:70px}
  .mos-result{top:178px;min-height:82px}
  .mos-row-primary button{min-height:52px}
  .mos-row-secondary button{min-height:46px}
  #expr,.mos-solve,.mos-icon-btn{height:58px}
}

/* === MOS UI NORMALIZATION PATCH: stop desktop magnification === */
.mos-app{
  max-width:1120px;
  padding:8px;
  gap:10px;
}

button{
  min-height:44px;
  padding:0 18px;
  font-size:18px;
  line-height:1;
}

.mos-board{
  max-height:66vh;
}

.mos-topbar button{
  min-height:42px;
  padding:0 18px;
  font-size:17px;
}

.mos-prompt{
  top:118px;
  min-height:70px;
  max-width:430px;
  padding:0 28px;
  font-size:24px;
  border-radius:24px;
}

.mos-result{
  top:210px;
  min-width:96px;
  min-height:88px;
  font-size:44px;
  border-radius:24px;
}

.mos-row-primary button{
  min-height:48px;
  font-size:19px;
  padding:0 18px;
}

.mos-row-secondary button,
.mos-row-tertiary button{
  min-height:42px;
  font-size:15px;
  padding:0 16px;
}

.mos-row-tertiary{
  display:flex;
  align-items:center;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
.mos-row-tertiary::-webkit-scrollbar{display:none}

.mos-input-row{
  grid-template-columns:56px minmax(0,1fr) 56px 104px;
  gap:10px;
}

.mos-icon-btn{
  width:56px;
  min-width:56px;
  height:56px;
  border-radius:20px;
  font-size:24px;
}

#expr{
  height:56px;
  border-radius:22px;
  font-size:22px;
  padding:0 22px;
}

.mos-solve{
  height:56px;
  min-width:104px;
  border-radius:22px;
  font-size:22px;
}

.mos-mic-btn svg{
  width:25px;
  height:25px;
  display:block;
  fill:none;
  stroke:#f8fafc;
  stroke-width:2.25;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mos-chip-active{
  border-color:rgba(56,189,248,.9);
  box-shadow:0 0 0 3px rgba(29,155,255,.16), 0 10px 26px rgba(0,0,0,.25);
  background:#14213a;
}

@media (min-width:1200px){
  .mos-app{
    max-width:1120px;
  }
  button{
    font-size:18px;
  }
  .mos-row-primary button{
    font-size:19px;
  }
}

@media (max-width:720px){
  .mos-app{
    padding:4px;
    gap:7px;
  }

  .mos-board{
    max-height:none;
  }

  .mos-topbar button{
    min-height:40px;
    padding:0 13px;
    font-size:14px;
  }

  .mos-prompt{
    top:100px;
    min-height:62px;
    max-width:calc(100% - 36px);
    font-size:20px;
    padding:0 20px;
  }

  .mos-result{
    top:176px;
    min-width:82px;
    min-height:74px;
    font-size:34px;
  }

  .mos-row-primary button{
    min-height:44px;
    font-size:16px;
    padding:0 15px;
  }

  .mos-row-secondary button,
  .mos-row-tertiary button{
    min-height:38px;
    font-size:13px;
    padding:0 13px;
  }

  .mos-input-row{
    grid-template-columns:50px minmax(0,1fr) 50px 88px;
    gap:7px;
  }

  .mos-icon-btn{
    width:50px;
    min-width:50px;
    height:52px;
    border-radius:18px;
  }

  #expr{
    height:52px;
    border-radius:19px;
    font-size:17px;
    padding:0 15px;
  }

  .mos-solve{
    height:52px;
    min-width:88px;
    border-radius:19px;
    font-size:18px;
  }
}

@media (max-height:760px){
  .mos-board{
    max-height:62vh;
  }
  .mos-prompt{
    top:94px;
    min-height:58px;
  }
  .mos-result{
    top:162px;
    min-height:68px;
  }
}

/* === MOS source intake modal === */
.mos-source-backdrop{
  position:fixed;
  inset:0;
  z-index:30;
  background:rgba(0,0,0,.18);
}

.mos-source-modal{
  position:fixed;
  left:50%;
  bottom:88px;
  transform:translateX(-50%);
  z-index:31;
  width:min(360px,calc(100vw - 28px));
  padding:10px;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(15,23,42,.96);
  box-shadow:0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
}

.mos-source-option{
  width:100%;
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  border-radius:16px;
  padding:10px 12px;
  background:transparent;
  border:1px solid transparent;
  box-shadow:none;
  text-align:left;
}

.mos-source-option:hover{
  background:rgba(148,163,184,.12);
  border-color:rgba(148,163,184,.20);
}

.mos-source-icon{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  font-size:18px;
  flex:0 0 auto;
}

.mos-source-option b{
  display:block;
  color:#f8fafc;
  font-size:15px;
  line-height:1.15;
}

.mos-source-option small{
  display:block;
  color:#aab4c3;
  font-size:12px;
  line-height:1.2;
  margin-top:3px;
  font-weight:700;
}

.mos-mic-btn{
  font-size:0 !important;
}

.mos-mic-btn svg{
  width:24px !important;
  height:24px !important;
  display:block !important;
  fill:none !important;
  stroke:#f8fafc !important;
  stroke-width:2.4 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  pointer-events:none;
}

@media (max-width:720px){
  .mos-source-modal{
    bottom:76px;
  }
}

/* === MOS PHASE 1-2: one-problem visual state === */

.mos-board{
  position:relative;
}

.mos-status{
  top:82px !important;
  left:30px !important;
  display:none;
  max-width:220px;
  min-height:30px;
  padding:6px 12px;
  font-size:13px;
  border-radius:999px;
  opacity:.92;
  z-index:5;
}

.mos-prompt{
  top:122px !important;
  left:30px !important;
  max-width:min(520px,calc(100% - 60px)) !important;
  min-height:64px !important;
  padding:0 26px !important;
  font-size:22px !important;
  border-radius:22px !important;
  z-index:5;
}

.mos-result{
  top:202px !important;
  left:30px !important;
  min-width:92px !important;
  min-height:76px !important;
  max-width:min(560px,calc(100% - 60px));
  padding:12px 22px !important;
  font-size:36px !important;
  line-height:1.08;
  border-radius:22px !important;
  z-index:5;
  word-break:break-word;
}

.mos-result.result-formula{
  justify-content:flex-start;
  text-align:left;
  font-size:26px !important;
  min-height:64px !important;
  max-width:min(620px,calc(100% - 60px));
}

.mos-result.result-number{
  justify-content:center;
  text-align:center;
  font-size:42px !important;
}

.mos-result.result-ready{
  font-size:26px !important;
}

.mos-result.result-error{
  font-size:22px !important;
  color:#fecaca;
}

.mos-work-note{
  position:absolute;
  right:28px;
  top:86px;
  z-index:5;
  max-width:360px;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.24);
  background:rgba(8,15,28,.72);
  color:#b7c2d3;
  font-size:13px;
  font-weight:800;
  line-height:1.3;
  display:none;
}

.mos-board.board-graphing .mos-work-note{
  display:block;
}

@media (max-width:720px){
  .mos-status{
    top:74px !important;
    left:18px !important;
  }

  .mos-prompt{
    top:108px !important;
    left:18px !important;
    max-width:calc(100% - 36px) !important;
    min-height:58px !important;
    font-size:18px !important;
  }

  .mos-result{
    top:178px !important;
    left:18px !important;
    max-width:calc(100% - 36px);
    min-height:66px !important;
    font-size:30px !important;
  }

  .mos-result.result-formula{
    font-size:22px !important;
  }

  .mos-work-note{
    display:none !important;
  }
}

/* === MOS PHASE 3: rendered graph mode === */
.mos-board.board-graphing .mos-result{
  font-size:22px !important;
  min-height:58px !important;
  max-width:420px;
}

.mos-board.board-graphing .mos-prompt{
  max-width:460px !important;
}

.mos-board.board-graphing .mos-work-note{
  display:block;
}

.mos-graph-label{
  position:absolute;
  right:28px;
  bottom:24px;
  z-index:5;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.24);
  background:rgba(8,15,28,.72);
  color:#b7c2d3;
  font-size:12px;
  font-weight:900;
  display:none;
}

.mos-board.board-graphing .mos-graph-label{
  display:block;
}

/* === MOS CARD RESIZE: prompt + answer should not overpower board === */

.mos-status{
  top:72px !important;
  left:28px !important;
  min-height:24px !important;
  padding:4px 11px !important;
  font-size:12px !important;
  line-height:1 !important;
  border-radius:999px !important;
  opacity:.86 !important;
}

.mos-prompt{
  top:102px !important;
  left:28px !important;
  width:auto !important;
  min-width:0 !important;
  max-width:min(430px, calc(100% - 56px)) !important;
  min-height:52px !important;
  height:auto !important;
  padding:12px 20px !important;
  font-size:19px !important;
  line-height:1.1 !important;
  border-radius:18px !important;
  white-space:normal !important;
}

.mos-result{
  top:168px !important;
  left:28px !important;
  min-width:72px !important;
  width:auto !important;
  max-width:min(430px, calc(100% - 56px)) !important;
  min-height:58px !important;
  height:auto !important;
  padding:10px 18px !important;
  font-size:30px !important;
  line-height:1 !important;
  border-radius:18px !important;
}

.mos-result.result-number{
  font-size:32px !important;
  min-width:72px !important;
  min-height:58px !important;
}

.mos-result.result-formula{
  font-size:22px !important;
  min-height:52px !important;
  padding:10px 18px !important;
}

@media (max-width:720px){
  .mos-status{
    top:68px !important;
    left:18px !important;
    font-size:11px !important;
  }

  .mos-prompt{
    top:96px !important;
    left:18px !important;
    max-width:calc(100% - 36px) !important;
    min-height:48px !important;
    padding:10px 16px !important;
    font-size:16px !important;
    border-radius:16px !important;
  }

  .mos-result{
    top:154px !important;
    left:18px !important;
    max-width:calc(100% - 36px) !important;
    min-width:64px !important;
    min-height:52px !important;
    padding:9px 15px !important;
    font-size:26px !important;
    border-radius:16px !important;
  }

  .mos-result.result-number{
    font-size:28px !important;
    min-width:64px !important;
    min-height:52px !important;
  }

  .mos-result.result-formula{
    font-size:19px !important;
  }
}

@media (max-height:760px){
  .mos-status{
    top:64px !important;
  }

  .mos-prompt{
    top:90px !important;
    min-height:46px !important;
  }

  .mos-result{
    top:146px !important;
    min-height:50px !important;
  }
}


/* === MOS RESPONSIVE REALITY CONTRACT 20260627r === */

/* Hide the old status/Quick Answer chip completely. */
.mos-status,
#statusCard{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Page shell: graph first, controls tight under it, no giant dead zone. */
.mos-app,
.mos-shell,
.mos-wrap,
.mos-page{
  width:min(100%, 1120px) !important;
  margin-inline:auto !important;
}

.mos-board{
  width:min(100%, 1120px) !important;
  height:clamp(410px, 56vh, 640px) !important;
  min-height:410px !important;
  max-height:640px !important;
  margin:0 auto 10px !important;
  border-radius:22px !important;
  overflow:hidden !important;
}

/* Board tools: compact, same visual language, no oversized pills. */
.mos-board button,
.mos-tool-btn,
.mos-board .mos-tool-btn,
.mos-board .mos-guide-btn,
#penBtn,
#eraserBtn,
#clearBtn,
#guideBtn{
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  padding:0 16px !important;
  border-radius:17px !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:850 !important;
}

/* Prompt/result cards stay compact and clean. */
.mos-board .mos-prompt,
#promptCard{
  top:88px !important;
  left:28px !important;
  width:clamp(300px, 38vw, 460px) !important;
  max-width:460px !important;
  height:48px !important;
  min-height:48px !important;
  max-height:48px !important;
  padding:0 20px !important;
  border-radius:18px !important;
  font-size:clamp(17px, 1.55vw, 24px) !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
}

.mos-board .mos-result,
#resultCard{
  top:150px !important;
  left:28px !important;
  width:auto !important;
  min-width:62px !important;
  max-width:240px !important;
  height:46px !important;
  min-height:46px !important;
  max-height:46px !important;
  padding:0 18px !important;
  border-radius:18px !important;
  font-size:clamp(24px, 2.4vw, 38px) !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.mos-board .mos-result.result-formula{
  width:clamp(220px, 36vw, 420px) !important;
  max-width:420px !important;
  justify-content:flex-start !important;
  font-size:clamp(16px, 1.7vw, 25px) !important;
}

/* Rails: no giant gap, single compact chip system. */
.mos-control-zone,
.mos-controls,
.mos-bottom,
.mos-rails,
.mos-category-rail,
.mos-subcategory-rail,
.mos-formula-rail,
#categoryRail,
#subcategoryRail,
#formulaRail{
  margin-top:0 !important;
  padding-top:0 !important;
}

.mos-category-rail,
.mos-subcategory-rail,
.mos-formula-rail,
#categoryRail,
#subcategoryRail,
#formulaRail{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  white-space:nowrap !important;
  scroll-snap-type:x proximity !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
}

.mos-category-rail::-webkit-scrollbar,
.mos-subcategory-rail::-webkit-scrollbar,
.mos-formula-rail::-webkit-scrollbar,
#categoryRail::-webkit-scrollbar,
#subcategoryRail::-webkit-scrollbar,
#formulaRail::-webkit-scrollbar{
  display:none !important;
}

/* First row and second row now share the same compact button scale. */
.mos-category-chip,
.mos-subcategory-chip,
.mos-chip,
#categoryRail button,
#subcategoryRail button{
  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;
  padding:0 13px !important;
  border-radius:16px !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:850 !important;
  flex:0 0 auto !important;
  width:auto !important;
  min-width:auto !important;
  max-width:none !important;
  scroll-snap-align:start !important;
}

/* Prevent any default category from looking selected. */
.mos-category-chip.mos-chip-active:not([data-user-selected="true"]),
#categoryRail button.mos-chip-active:not([data-user-selected="true"]){
  border-color:rgba(148,163,184,.32) !important;
  box-shadow:none !important;
  background:rgba(15,23,42,.78) !important;
}

/* Symbol buttons compact. */
.mos-symbol-chip,
#formulaRail button{
  width:32px !important;
  min-width:32px !important;
  max-width:32px !important;
  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;
  padding:0 !important;
  border-radius:16px !important;
  font-size:15px !important;
  line-height:1 !important;
  flex:0 0 auto !important;
}

/* Input row: realistic mobile/desktop scale. */
.mos-input-row{
  display:grid !important;
  grid-template-columns:34px minmax(0, 1fr) 34px 62px !important;
  gap:8px !important;
  align-items:center !important;
  margin-top:8px !important;
  width:100% !important;
}

.mos-add-btn,
.mos-mic-btn,
#sourceBtn,
#voiceBtn{
  width:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  border-radius:14px !important;
  font-size:17px !important;
  padding:0 !important;
}

.mos-input,
#expr{
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  border-radius:14px !important;
  padding:0 14px !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:800 !important;
}

.mos-solve-btn,
#solveBtn{
  width:62px !important;
  min-width:62px !important;
  max-width:62px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  border-radius:14px !important;
  padding:0 8px !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:900 !important;
}

/* Desktop spacing: graph should sit close to controls. */
@media (min-width: 761px){
  .mos-board{
    height:clamp(430px, 58vh, 620px) !important;
    margin-bottom:10px !important;
  }

  .mos-category-chip,
  .mos-subcategory-chip,
  .mos-chip,
  #categoryRail button,
  #subcategoryRail button{
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    padding:0 14px !important;
    border-radius:17px !important;
    font-size:14px !important;
  }

  .mos-symbol-chip,
  #formulaRail button{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
    max-width:32px !important;
    max-height:32px !important;
  }
}

/* Phone: graph gets priority, controls become compact, no huge chips. */
@media (max-width: 760px){
  body{
    overflow-x:hidden !important;
  }

  .mos-app,
  .mos-shell,
  .mos-wrap,
  .mos-page{
    width:100% !important;
    max-width:100% !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }

  .mos-board{
    width:100% !important;
    height:52vh !important;
    min-height:390px !important;
    max-height:500px !important;
    margin:0 0 8px !important;
    border-radius:20px !important;
  }

  .mos-board button,
  .mos-tool-btn,
  .mos-board .mos-tool-btn,
  .mos-board .mos-guide-btn,
  #penBtn,
  #eraserBtn,
  #clearBtn,
  #guideBtn{
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    padding:0 11px !important;
    border-radius:15px !important;
    font-size:12px !important;
  }

  .mos-board .mos-prompt,
  #promptCard{
    top:78px !important;
    left:16px !important;
    width:calc(100% - 32px) !important;
    max-width:330px !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    padding:0 14px !important;
    border-radius:15px !important;
    font-size:16px !important;
  }

  .mos-board .mos-result,
  #resultCard{
    top:130px !important;
    left:16px !important;
    min-width:52px !important;
    max-width:170px !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    padding:0 14px !important;
    border-radius:15px !important;
    font-size:24px !important;
  }

  .mos-board .mos-result.result-formula{
    width:calc(100% - 32px) !important;
    max-width:300px !important;
    font-size:15px !important;
  }

  .mos-category-rail,
  .mos-subcategory-rail,
  .mos-formula-rail,
  #categoryRail,
  #subcategoryRail,
  #formulaRail{
    gap:6px !important;
    padding:0 !important;
    margin:0 0 6px !important;
  }

  .mos-category-chip,
  .mos-subcategory-chip,
  .mos-chip,
  #categoryRail button,
  #subcategoryRail button{
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
    padding:0 10px !important;
    border-radius:14px !important;
    font-size:12px !important;
    font-weight:850 !important;
  }

  .mos-symbol-chip,
  #formulaRail button{
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
    border-radius:14px !important;
    font-size:13px !important;
  }

  .mos-input-row{
    grid-template-columns:30px minmax(0, 1fr) 30px 52px !important;
    gap:6px !important;
    margin-top:6px !important;
  }

  .mos-add-btn,
  .mos-mic-btn,
  #sourceBtn,
  #voiceBtn{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    border-radius:12px !important;
    font-size:15px !important;
  }

  .mos-input,
  #expr{
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    border-radius:12px !important;
    padding:0 10px !important;
    font-size:12px !important;
  }

  .mos-solve-btn,
  #solveBtn{
    width:52px !important;
    min-width:52px !important;
    max-width:52px !important;
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    border-radius:12px !important;
    font-size:11px !important;
    padding:0 6px !important;
  }
}

/* Very short phones / browser chrome open: shrink controls more, keep graph usable. */
@media (max-width: 760px) and (max-height: 760px){
  .mos-board{
    height:50vh !important;
    min-height:340px !important;
    margin-bottom:6px !important;
  }

  .mos-category-chip,
  .mos-subcategory-chip,
  .mos-chip,
  #categoryRail button,
  #subcategoryRail button{
    height:25px !important;
    min-height:25px !important;
    max-height:25px !important;
    padding:0 9px !important;
    border-radius:13px !important;
    font-size:11px !important;
  }

  .mos-symbol-chip,
  #formulaRail button{
    width:26px !important;
    min-width:26px !important;
    max-width:26px !important;
    height:26px !important;
    min-height:26px !important;
    max-height:26px !important;
    border-radius:13px !important;
    font-size:12px !important;
  }

  .mos-input-row{
    grid-template-columns:28px minmax(0, 1fr) 28px 48px !important;
    gap:5px !important;
    margin-top:5px !important;
  }

  .mos-add-btn,
  .mos-mic-btn,
  #sourceBtn,
  #voiceBtn,
  .mos-input,
  #expr,
  .mos-solve-btn,
  #solveBtn{
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
  }

  .mos-add-btn,
  .mos-mic-btn,
  #sourceBtn,
  #voiceBtn{
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;
  }

  .mos-solve-btn,
  #solveBtn{
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
    font-size:10px !important;
  }

  .mos-input,
  #expr{
    font-size:11px !important;
  }
}

/* === END MOS RESPONSIVE REALITY CONTRACT === */



/* === MOS BOARD GAP REALITY FIX 20260627s === */

/*
  Final layout rule:
  - Board owns the vertical space.
  - Controls sit right below it.
  - No giant dead zone between graph and chips.
  - Chips stay compact and horizontal.
*/

html,
body{
  min-height:100%;
  overflow-x:hidden !important;
}

body{
  margin:0 !important;
}

/* Main page shell: stop any old spacing contracts from pushing controls down */
.mos-app,
.mos-shell,
.mos-page,
.mos-main,
.mos-wrap,
.mos-calculator,
.mos-layout{
  gap:0 !important;
  row-gap:0 !important;
}

/* Board/graph: make it taller so it comes down toward the controls */
.mos-board,
#board{
  width:min(1120px, calc(100vw - 28px)) !important;
  height:clamp(500px, 66vh, 650px) !important;
  min-height:500px !important;
  max-height:650px !important;
  margin:18px auto 10px auto !important;
  flex:0 0 auto !important;
}

/* Keep board cards inside the board and modest */
.mos-board .mos-prompt,
#promptCard{
  top:92px !important;
  left:30px !important;
  width:clamp(300px, 36vw, 470px) !important;
  height:48px !important;
  min-height:48px !important;
  max-height:48px !important;
  padding:0 18px !important;
  border-radius:18px !important;
  font-size:clamp(17px, 1.55vw, 23px) !important;
  line-height:1 !important;
}

.mos-board .mos-result,
#resultCard{
  top:152px !important;
  left:30px !important;
  min-width:62px !important;
  height:48px !important;
  min-height:48px !important;
  max-height:48px !important;
  padding:0 18px !important;
  border-radius:18px !important;
  font-size:clamp(24px, 2.6vw, 38px) !important;
  line-height:1 !important;
}

/* Controls: sit immediately under the board */
.mos-controls,
.mos-control-panel,
.mos-keypad,
.mos-tools,
.mos-bottom,
.mos-input-area,
.mos-rails,
.mos-category-rail,
.mos-subcategory-rail,
.mos-formula-rail,
#categoryRail,
#subcategoryRail,
#formulaRail{
  margin-top:0 !important;
}

/* Rail group spacing */
.mos-category-rail,
.mos-subcategory-rail,
.mos-formula-rail,
#categoryRail,
#subcategoryRail,
#formulaRail{
  width:min(1120px, calc(100vw - 28px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  gap:8px !important;
  padding:0 0 6px 0 !important;
  scrollbar-width:none !important;
}

.mos-category-rail::-webkit-scrollbar,
.mos-subcategory-rail::-webkit-scrollbar,
.mos-formula-rail::-webkit-scrollbar,
#categoryRail::-webkit-scrollbar,
#subcategoryRail::-webkit-scrollbar,
#formulaRail::-webkit-scrollbar{
  display:none !important;
}

/* All chip rows same compact scale */
.mos-category-chip,
.mos-subcategory-chip,
.mos-chip,
#categoryRail button,
#subcategoryRail button{
  height:30px !important;
  min-height:30px !important;
  max-height:30px !important;
  padding:0 14px !important;
  border-radius:15px !important;
  font-size:14px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

/* Symbol chips smaller */
.mos-symbol-chip,
#formulaRail button{
  width:30px !important;
  min-width:30px !important;
  max-width:30px !important;
  height:30px !important;
  min-height:30px !important;
  max-height:30px !important;
  padding:0 !important;
  border-radius:15px !important;
  font-size:14px !important;
  line-height:1 !important;
}

/* Input row: compact, no wasted height */
.mos-input-row,
#inputRow{
  width:min(1120px, calc(100vw - 28px)) !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:34px minmax(0, 1fr) 34px 62px !important;
  gap:8px !important;
  align-items:center !important;
}

.mos-add-btn,
.mos-mic-btn,
#sourceBtn,
#voiceBtn{
  width:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  border-radius:13px !important;
  font-size:15px !important;
  padding:0 !important;
}

.mos-input,
#expr{
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  border-radius:13px !important;
  padding:0 12px !important;
  font-size:14px !important;
  line-height:1 !important;
}

.mos-solve-btn,
#solveBtn{
  width:62px !important;
  min-width:62px !important;
  max-width:62px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  border-radius:13px !important;
  padding:0 8px !important;
  font-size:13px !important;
  line-height:1 !important;
}

/* Tablet / narrow desktop */
@media (max-width: 900px){
  .mos-board,
  #board{
    width:calc(100vw - 18px) !important;
    height:clamp(500px, 62svh, 620px) !important;
    min-height:500px !important;
    margin:10px auto 8px auto !important;
  }

  .mos-category-rail,
  .mos-subcategory-rail,
  .mos-formula-rail,
  #categoryRail,
  #subcategoryRail,
  #formulaRail,
  .mos-input-row,
  #inputRow{
    width:calc(100vw - 18px) !important;
  }
}

/* Phone: board still dominates, controls become compact */
@media (max-width: 760px){
  .mos-board,
  #board{
    width:calc(100vw - 16px) !important;
    height:56svh !important;
    min-height:440px !important;
    max-height:560px !important;
    margin:8px auto 8px auto !important;
  }

  .mos-board .mos-prompt,
  #promptCard{
    top:86px !important;
    left:24px !important;
    width:calc(100% - 72px) !important;
    max-width:360px !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    padding:0 14px !important;
    border-radius:16px !important;
    font-size:16px !important;
  }

  .mos-board .mos-result,
  #resultCard{
    top:140px !important;
    left:24px !important;
    min-width:54px !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    padding:0 14px !important;
    border-radius:16px !important;
    font-size:25px !important;
  }

  .mos-category-rail,
  .mos-subcategory-rail,
  .mos-formula-rail,
  #categoryRail,
  #subcategoryRail,
  #formulaRail{
    width:calc(100vw - 16px) !important;
    gap:6px !important;
    padding-bottom:5px !important;
  }

  .mos-category-chip,
  .mos-subcategory-chip,
  .mos-chip,
  #categoryRail button,
  #subcategoryRail button{
    height:26px !important;
    min-height:26px !important;
    max-height:26px !important;
    padding:0 10px !important;
    border-radius:13px !important;
    font-size:12px !important;
  }

  .mos-symbol-chip,
  #formulaRail button{
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
    border-radius:14px !important;
    font-size:13px !important;
  }

  .mos-input-row,
  #inputRow{
    width:calc(100vw - 16px) !important;
    grid-template-columns:30px minmax(0, 1fr) 30px 54px !important;
    gap:6px !important;
  }

  .mos-add-btn,
  .mos-mic-btn,
  #sourceBtn,
  #voiceBtn,
  .mos-input,
  #expr,
  .mos-solve-btn,
  #solveBtn{
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
  }

  .mos-add-btn,
  .mos-mic-btn,
  #sourceBtn,
  #voiceBtn{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    border-radius:12px !important;
    font-size:14px !important;
  }

  .mos-input,
  #expr{
    border-radius:12px !important;
    padding:0 10px !important;
    font-size:12px !important;
  }

  .mos-solve-btn,
  #solveBtn{
    width:54px !important;
    min-width:54px !important;
    max-width:54px !important;
    border-radius:12px !important;
    font-size:11px !important;
  }
}

/* Short phone / browser chrome open */
@media (max-width: 760px) and (max-height: 760px){
  .mos-board,
  #board{
    height:52svh !important;
    min-height:400px !important;
    max-height:500px !important;
  }

  .mos-category-chip,
  .mos-subcategory-chip,
  .mos-chip,
  #categoryRail button,
  #subcategoryRail button{
    height:24px !important;
    min-height:24px !important;
    max-height:24px !important;
    padding:0 9px !important;
    font-size:11px !important;
  }

  .mos-symbol-chip,
  #formulaRail button{
    width:26px !important;
    min-width:26px !important;
    max-width:26px !important;
    height:26px !important;
    min-height:26px !important;
    max-height:26px !important;
  }
}

/* === END MOS BOARD GAP REALITY FIX === */


/* === MOS HARD DOCK CONTROLS 20260627t === */

/*
  Real contract:
  1. Board/graph gets the screen.
  2. Chips/input dock immediately below it.
  3. No default huge category scale.
  4. No dead-space gap.
*/

html,
body{
  width:100%;
  min-height:100%;
  margin:0 !important;
  overflow-x:hidden !important;
}

body{
  background:#020611 !important;
}

/* Main MOS frame */
.mos-app,
.mos-shell,
.mos-page,
.mos-main,
.mos-wrap,
.mos-calculator,
.mos-layout{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:0 !important;
  row-gap:0 !important;
}

/* Board owns the vertical space */
.mos-board,
#board{
  width:min(1120px, calc(100vw - 28px)) !important;
  height:clamp(520px, 68vh, 700px) !important;
  min-height:520px !important;
  max-height:700px !important;
  margin:18px auto 8px auto !important;
  flex:0 0 auto !important;
}

/* Board cards compact */
.mos-board .mos-prompt,
#promptCard{
  top:86px !important;
  left:30px !important;
  width:clamp(290px, 34vw, 450px) !important;
  max-width:450px !important;
  height:44px !important;
  min-height:44px !important;
  max-height:44px !important;
  padding:0 16px !important;
  border-radius:17px !important;
  font-size:clamp(16px, 1.45vw, 22px) !important;
  line-height:1 !important;
}

.mos-board .mos-result,
#resultCard{
  top:142px !important;
  left:30px !important;
  min-width:56px !important;
  max-width:220px !important;
  height:44px !important;
  min-height:44px !important;
  max-height:44px !important;
  padding:0 16px !important;
  border-radius:17px !important;
  font-size:clamp(23px, 2.4vw, 36px) !important;
  line-height:1 !important;
}

/* New dock container */
.mos-control-dock{
  width:min(1120px, calc(100vw - 28px)) !important;
  margin:0 auto !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  flex:0 0 auto !important;
}

/* Kill inherited giant margins */
.mos-control-dock *,
#categoryRail,
#subcategoryRail,
#formulaRail,
.mos-input-row,
#inputRow{
  box-sizing:border-box !important;
}

/* Every rail becomes one tight horizontal strip */
.mos-control-dock #categoryRail,
.mos-control-dock #subcategoryRail,
.mos-control-dock #formulaRail,
.mos-category-rail,
.mos-subcategory-rail,
.mos-formula-rail{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:7px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-width:none !important;
}

.mos-control-dock #categoryRail::-webkit-scrollbar,
.mos-control-dock #subcategoryRail::-webkit-scrollbar,
.mos-control-dock #formulaRail::-webkit-scrollbar{
  display:none !important;
}

/* Primary and secondary chips same scale */
.mos-control-dock .mos-category-chip,
.mos-control-dock .mos-subcategory-chip,
.mos-control-dock .mos-chip,
.mos-control-dock #categoryRail button,
.mos-control-dock #subcategoryRail button{
  height:28px !important;
  min-height:28px !important;
  max-height:28px !important;
  padding:0 12px !important;
  border-radius:14px !important;
  font-size:13px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

/* Symbol row smaller */
.mos-control-dock .mos-symbol-chip,
.mos-control-dock #formulaRail button{
  width:28px !important;
  min-width:28px !important;
  max-width:28px !important;
  height:28px !important;
  min-height:28px !important;
  max-height:28px !important;
  padding:0 !important;
  border-radius:14px !important;
  font-size:13px !important;
  line-height:1 !important;
}

/* Input row compact */
.mos-control-dock .mos-input-row,
.mos-control-dock #inputRow{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:34px minmax(0, 1fr) 34px 62px !important;
  align-items:center !important;
  gap:7px !important;
}

.mos-control-dock .mos-add-btn,
.mos-control-dock .mos-mic-btn,
.mos-control-dock #sourceBtn,
.mos-control-dock #voiceBtn{
  width:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  border-radius:13px !important;
  padding:0 !important;
  font-size:15px !important;
}

.mos-control-dock .mos-input,
.mos-control-dock #expr{
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  border-radius:13px !important;
  padding:0 12px !important;
  font-size:14px !important;
  line-height:1 !important;
}

.mos-control-dock .mos-solve-btn,
.mos-control-dock #solveBtn{
  width:62px !important;
  min-width:62px !important;
  max-width:62px !important;
  height:34px !important;
  min-height:34px !important;
  max-height:34px !important;
  border-radius:13px !important;
  padding:0 8px !important;
  font-size:13px !important;
  line-height:1 !important;
}

/* No selected category glow unless user actually taps one */
.mos-chip-active,
.mos-category-chip.mos-chip-active,
.mos-subcategory-chip.mos-chip-active{
  box-shadow:none !important;
}

/* Phone */
@media (max-width:760px){
  .mos-board,
  #board{
    width:calc(100vw - 16px) !important;
    height:58svh !important;
    min-height:440px !important;
    max-height:570px !important;
    margin:8px auto 7px auto !important;
  }

  .mos-control-dock{
    width:calc(100vw - 16px) !important;
    gap:5px !important;
  }

  .mos-board .mos-prompt,
  #promptCard{
    top:82px !important;
    left:24px !important;
    width:calc(100% - 72px) !important;
    max-width:340px !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    padding:0 13px !important;
    border-radius:15px !important;
    font-size:15px !important;
  }

  .mos-board .mos-result,
  #resultCard{
    top:132px !important;
    left:24px !important;
    min-width:50px !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    padding:0 13px !important;
    border-radius:15px !important;
    font-size:23px !important;
  }

  .mos-control-dock .mos-category-chip,
  .mos-control-dock .mos-subcategory-chip,
  .mos-control-dock .mos-chip,
  .mos-control-dock #categoryRail button,
  .mos-control-dock #subcategoryRail button{
    height:24px !important;
    min-height:24px !important;
    max-height:24px !important;
    padding:0 9px !important;
    border-radius:12px !important;
    font-size:11px !important;
  }

  .mos-control-dock .mos-symbol-chip,
  .mos-control-dock #formulaRail button{
    width:26px !important;
    min-width:26px !important;
    max-width:26px !important;
    height:26px !important;
    min-height:26px !important;
    max-height:26px !important;
    border-radius:13px !important;
    font-size:12px !important;
  }

  .mos-control-dock .mos-input-row,
  .mos-control-dock #inputRow{
    grid-template-columns:30px minmax(0, 1fr) 30px 52px !important;
    gap:6px !important;
  }

  .mos-control-dock .mos-add-btn,
  .mos-control-dock .mos-mic-btn,
  .mos-control-dock #sourceBtn,
  .mos-control-dock #voiceBtn,
  .mos-control-dock .mos-input,
  .mos-control-dock #expr,
  .mos-control-dock .mos-solve-btn,
  .mos-control-dock #solveBtn{
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
  }

  .mos-control-dock .mos-add-btn,
  .mos-control-dock .mos-mic-btn,
  .mos-control-dock #sourceBtn,
  .mos-control-dock #voiceBtn{
    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
    border-radius:12px !important;
  }

  .mos-control-dock .mos-input,
  .mos-control-dock #expr{
    border-radius:12px !important;
    padding:0 10px !important;
    font-size:12px !important;
  }

  .mos-control-dock .mos-solve-btn,
  .mos-control-dock #solveBtn{
    width:52px !important;
    min-width:52px !important;
    max-width:52px !important;
    border-radius:12px !important;
    font-size:10px !important;
  }
}

/* Short mobile browser chrome */
@media (max-width:760px) and (max-height:760px){
  .mos-board,
  #board{
    height:54svh !important;
    min-height:400px !important;
    max-height:520px !important;
  }
}

/* === END MOS HARD DOCK CONTROLS === */


/* === MOS BOARD FILL BOTTOM SPACE 20260627u === */

/*
  Current issue:
  Controls are finally compact and docked correctly,
  but the board is too short, leaving dead space below the input row.
  This stretches the board down and keeps the controls directly attached.
*/

/* Desktop / normal browser */
.mos-board,
#board{
  height:clamp(610px, 76vh, 790px) !important;
  min-height:610px !important;
  max-height:790px !important;
  margin-top:18px !important;
  margin-bottom:8px !important;
}

/* Keep dock tight under the taller graph */
.mos-control-dock,
#mosControlDock{
  margin-top:0 !important;
  padding-top:0 !important;
  gap:6px !important;
}

/* Keep internal board cards near top, not floating too low */
.mos-board .mos-prompt,
#promptCard{
  top:86px !important;
}

.mos-board .mos-result,
#resultCard{
  top:142px !important;
}

/* Laptop / narrower desktop */
@media (max-width:1180px){
  .mos-board,
  #board{
    height:clamp(560px, 74vh, 740px) !important;
    min-height:560px !important;
    max-height:740px !important;
  }
}

/* Phone / small browser */
@media (max-width:760px){
  .mos-board,
  #board{
    width:calc(100vw - 16px) !important;
    height:64svh !important;
    min-height:500px !important;
    max-height:650px !important;
    margin-top:8px !important;
    margin-bottom:6px !important;
  }

  .mos-control-dock,
  #mosControlDock{
    width:calc(100vw - 16px) !important;
    gap:5px !important;
  }
}

/* Short mobile browser chrome open */
@media (max-width:760px) and (max-height:760px){
  .mos-board,
  #board{
    height:60svh !important;
    min-height:455px !important;
    max-height:590px !important;
  }
}

/* Very short desktop window */
@media (min-width:761px) and (max-height:760px){
  .mos-board,
  #board{
    height:62vh !important;
    min-height:500px !important;
    max-height:620px !important;
  }
}

/* === END MOS BOARD FILL BOTTOM SPACE === */


/* === MOS BOARD +100PX / BOTTOM DOCK FINAL 20260627v === */

/*
  Goal:
  - graph/work board gets another ~100px
  - controls sit at the bottom of the visible app
  - no wasted dead zone under the input row
  - chips/input stay compact
*/

html,
body{
  min-height:100%;
}

body{
  overflow:hidden !important;
}

.mos-app,
.mos-shell,
main,
#app{
  min-height:100svh !important;
}

/* Desktop / app window: make the page a real vertical stack */
.mos-shell,
.mos-app{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
}

/* The graph gets the space. */
.mos-board,
#board{
  width:min(1160px, calc(100vw - 34px)) !important;
  height:clamp(700px, calc(100svh - 210px), 900px) !important;
  min-height:700px !important;
  max-height:900px !important;
  margin-top:18px !important;
  margin-bottom:6px !important;
  flex:0 0 auto !important;
}

/* Controls stay attached and low. */
.mos-control-dock,
#mosControlDock{
  width:min(1160px, calc(100vw - 34px)) !important;
  margin-top:0 !important;
  margin-bottom:8px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  flex:0 0 auto !important;
}

/* Compact all chip rows equally. */
.mos-category-rail,
.mos-subcategory-rail,
.mos-formula-rail,
#categoryRail,
#subcategoryRail,
#formulaRail{
  width:100% !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  gap:7px !important;
  padding:0 !important;
  margin:0 !important;
  scrollbar-width:none !important;
}

.mos-category-rail::-webkit-scrollbar,
.mos-subcategory-rail::-webkit-scrollbar,
.mos-formula-rail::-webkit-scrollbar,
#categoryRail::-webkit-scrollbar,
#subcategoryRail::-webkit-scrollbar,
#formulaRail::-webkit-scrollbar{
  display:none !important;
}

.mos-category-chip,
.mos-subcategory-chip,
.mos-chip,
#categoryRail button,
#subcategoryRail button{
  height:26px !important;
  min-height:26px !important;
  max-height:26px !important;
  padding:0 10px !important;
  border-radius:13px !important;
  font-size:12px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.mos-symbol-chip,
#formulaRail button{
  width:28px !important;
  min-width:28px !important;
  max-width:28px !important;
  height:28px !important;
  min-height:28px !important;
  max-height:28px !important;
  padding:0 !important;
  border-radius:14px !important;
  font-size:13px !important;
}

/* Bottom input row compact and docked. */
.mos-input-row,
#inputRow{
  width:100% !important;
  display:grid !important;
  grid-template-columns:30px minmax(0, 1fr) 30px 54px !important;
  gap:6px !important;
  margin:0 !important;
  padding:0 !important;
}

.mos-add-btn,
.mos-mic-btn,
#sourceBtn,
#voiceBtn,
.mos-input,
#expr,
.mos-solve-btn,
#solveBtn{
  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;
}

.mos-add-btn,
.mos-mic-btn,
#sourceBtn,
#voiceBtn{
  width:30px !important;
  min-width:30px !important;
  max-width:30px !important;
  border-radius:12px !important;
  font-size:14px !important;
}

.mos-input,
#expr{
  border-radius:12px !important;
  padding:0 10px !important;
  font-size:12px !important;
}

.mos-solve-btn,
#solveBtn{
  width:54px !important;
  min-width:54px !important;
  max-width:54px !important;
  border-radius:12px !important;
  font-size:11px !important;
  padding:0 !important;
}

/* Keep board cards clean near top. */
.mos-board .mos-prompt,
#promptCard{
  top:92px !important;
  left:28px !important;
}

.mos-board .mos-result,
#resultCard{
  top:146px !important;
  left:28px !important;
}

/* Smaller desktop windows: still extend board down. */
@media (max-height:850px) and (min-width:761px){
  .mos-board,
  #board{
    height:calc(100svh - 170px) !important;
    min-height:610px !important;
    max-height:760px !important;
  }

  .mos-control-dock,
  #mosControlDock{
    gap:5px !important;
    margin-bottom:6px !important;
  }
}

/* Phone: graph first, controls at bottom, no dead gap. */
@media (max-width:760px){
  body{
    overflow:hidden !important;
  }

  .mos-board,
  #board{
    width:calc(100vw - 14px) !important;
    height:calc(100svh - 166px) !important;
    min-height:540px !important;
    max-height:none !important;
    margin-top:7px !important;
    margin-bottom:5px !important;
  }

  .mos-control-dock,
  #mosControlDock{
    width:calc(100vw - 14px) !important;
    gap:5px !important;
    margin-top:0 !important;
    margin-bottom:6px !important;
  }

  .mos-category-chip,
  .mos-subcategory-chip,
  .mos-chip,
  #categoryRail button,
  #subcategoryRail button{
    height:24px !important;
    min-height:24px !important;
    max-height:24px !important;
    padding:0 9px !important;
    border-radius:12px !important;
    font-size:11px !important;
  }

  .mos-symbol-chip,
  #formulaRail button{
    width:26px !important;
    min-width:26px !important;
    max-width:26px !important;
    height:26px !important;
    min-height:26px !important;
    max-height:26px !important;
    border-radius:13px !important;
    font-size:12px !important;
  }

  .mos-input-row,
  #inputRow{
    grid-template-columns:28px minmax(0, 1fr) 28px 50px !important;
    gap:5px !important;
  }

  .mos-add-btn,
  .mos-mic-btn,
  #sourceBtn,
  #voiceBtn,
  .mos-input,
  #expr,
  .mos-solve-btn,
  #solveBtn{
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
  }

  .mos-add-btn,
  .mos-mic-btn,
  #sourceBtn,
  #voiceBtn{
    width:28px !important;
    min-width:28px !important;
    max-width:28px !important;
  }

  .mos-solve-btn,
  #solveBtn{
    width:50px !important;
    min-width:50px !important;
    max-width:50px !important;
    font-size:10px !important;
  }

  .mos-input,
  #expr{
    font-size:11px !important;
  }
}

/* Very short mobile browser chrome open. */
@media (max-width:760px) and (max-height:760px){
  .mos-board,
  #board{
    height:calc(100svh - 154px) !important;
    min-height:500px !important;
  }
}

/* === END MOS BOARD +100PX / BOTTOM DOCK FINAL === */

/* === MOS BOARD CARD ALIGNMENT CONTRACT 20260627w === */

/*
  Goal:
  Tool row stays at top.
  Prompt/result sit directly under it, aligned cleanly.
  Work/drawing/graph space starts below the answer card.
*/

/* Desktop / normal browser */
.mos-board .mos-prompt,
#promptCard{
  top:72px !important;
  left:32px !important;
  width:clamp(300px, 35vw, 520px) !important;
  max-width:520px !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  padding:0 18px !important;
  border-radius:18px !important;
  font-size:clamp(15px, 1.35vw, 22px) !important;
  line-height:1 !important;
}

.mos-board .mos-result,
#resultCard{
  top:122px !important;
  left:32px !important;
  min-width:58px !important;
  max-width:260px !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  padding:0 18px !important;
  border-radius:18px !important;
  font-size:clamp(22px, 2.4vw, 34px) !important;
  line-height:1 !important;
}

/* Long formula answer stays same system, just wider */
.mos-board .mos-result.result-formula,
#resultCard.result-formula{
  width:clamp(240px, 34vw, 480px) !important;
  max-width:480px !important;
  justify-content:flex-start !important;
  font-size:clamp(15px, 1.45vw, 22px) !important;
}

/* Reserve clean work space below the cards for drawings/graphs/shapes */
.mos-board::after,
#board::after{
  content:"";
  position:absolute;
  left:24px;
  right:24px;
  top:178px;
  bottom:18px;
  pointer-events:none;
}

/* Future graph mode: cards stay compact, graph owns the rest */
.mos-board.board-graphing .mos-prompt,
#board.board-graphing #promptCard{
  top:72px !important;
  left:32px !important;
}

.mos-board.board-graphing .mos-result,
#board.board-graphing #resultCard{
  top:122px !important;
  left:32px !important;
}

/* Future shape / geometry mode: leave larger drawing area under cards */
.mos-board.board-shape .mos-prompt,
#board.board-shape #promptCard,
.mos-board.board-geometry .mos-prompt,
#board.board-geometry #promptCard{
  top:72px !important;
  left:32px !important;
}

.mos-board.board-shape .mos-result,
#board.board-shape #resultCard,
.mos-board.board-geometry .mos-result,
#board.board-geometry #resultCard{
  top:122px !important;
  left:32px !important;
}

/* Laptop / narrow desktop */
@media (max-width:1180px){
  .mos-board .mos-prompt,
  #promptCard{
    top:66px !important;
    left:26px !important;
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
    border-radius:16px !important;
    font-size:15px !important;
  }

  .mos-board .mos-result,
  #resultCard{
    top:112px !important;
    left:26px !important;
    height:38px !important;
    min-height:38px !important;
    max-height:38px !important;
    border-radius:16px !important;
    font-size:24px !important;
  }
}

/* Phone / small browser */
@media (max-width:760px){
  .mos-board .mos-prompt,
  #promptCard{
    top:58px !important;
    left:18px !important;
    width:calc(100% - 36px) !important;
    max-width:340px !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    padding:0 13px !important;
    border-radius:14px !important;
    font-size:13px !important;
  }

  .mos-board .mos-result,
  #resultCard{
    top:98px !important;
    left:18px !important;
    min-width:46px !important;
    max-width:190px !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    padding:0 13px !important;
    border-radius:14px !important;
    font-size:22px !important;
  }

  .mos-board .mos-result.result-formula,
  #resultCard.result-formula{
    width:calc(100% - 36px) !important;
    max-width:320px !important;
    font-size:13px !important;
  }

  .mos-board::after,
  #board::after{
    top:142px;
    bottom:12px;
    left:14px;
    right:14px;
  }
}

/* Very short mobile browser chrome */
@media (max-width:760px) and (max-height:760px){
  .mos-board .mos-prompt,
  #promptCard{
    top:54px !important;
  }

  .mos-board .mos-result,
  #resultCard{
    top:90px !important;
  }

  .mos-board::after,
  #board::after{
    top:132px;
  }
}

/* === END MOS BOARD CARD ALIGNMENT CONTRACT === */